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STANDING OVATION 



La quantità di mail e complimenti che abbiamo ricevuto per il 
primo numero di Programmare il Web è stata davvero stupefa- 
cente, e l'urgenza di ringraziare tutti quelli che ci hanno scritto 
mi costringe a superare ogni imbarazzo: un grazie di cuore a tut- 
ti! 

Spero che anche questo mese non sarete delusi dai contenuti 
che vi offriamo e che, nei limiti dell'attuale spazio, cercano di ab- 
bracciare tutte le principali tecnologie disponibili oggi per il 
Web. 

Per il futuro, già sento un certo prurito alle mani: l'Umts e l'in- 
tegrazione fra cellulari e palmari si fanno sempre più vicini. Già 
oggi si vedono telefoni con display extra-large e telecamera in- 
tegrata che competono per funzionalità e prestazioni con i mi- 
gliori palmari di qualche anno fa e che hanno un solo problema: 
il software. Non tanto per le difficoltà intrinseche, quanto per la 
difficile interazione cui l'utente è costretto dalle piccole dimen- 
sioni del dispositivo. Le prossime sfide per i programmatori si 
giocheranno tutte su questo campo: trovare applicazioni di rea- 
le interesse per gli utenti e riuscire a realizzare delle interfacce 
valide ed efficaci anche per dispositivi "microscopici". 
Molte aziende hanno pensato di superare il problema puntando 
tutto sui giochi. In questo modo hanno saltato a pie pari il pro- 
blema della difficoltà di interazione: i primi utenti dei videogame 
sono sempre stati i ragazzi più giovani e, per loro, la navigazio- 
ne nei più contorti menu è più un diletto che un problema... 
Ovviamente, ridurre le nuove opportunità dei nuovi cellulari al 
semplice scopo ludico sarebbe un vero peccato. La sfida è aper- 
ta e le uniche armi ammesse sono le idee. ioProgrammo e Pro- 
grammare il Web saranno sicuramente in prima linea: voi non 
mancate! 
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Dreamwecnrer 
MX: fare bella 
figura sul web 

Con l'ultima versione del celebre 

prodotto della Macromedia, imporre 

la propria presenza su internet 

diventa più facile e si possono 

ottenere risultati di alta professionalità 

anche con competenze di base. 



Dreamweaver MX fa parte dell'ultima gene- 
razione della suite di prodotti rilasciata 
dalla Macromedia, una casa produttrice di 
software che si è imposta sul mercato per 
la validità dei suoi prodotti nel campo del- 
la creatività multimediale e applicata al web. 
In particolare, Dreamweaver è il tool per la gestione e 
produzione di pagine HTML: oltre a permettervi di 
creare dal nulla le pagine web più complesse gesten- 
do in maniera user-friendly qualunque aspetto del 
linguaggio, dal più semplice al più complesso, l'ulti- 
mo rilascio del prodotto contiene anche tutta una se- 
rie di funzionalità per lavorare agevolmente anche 
con il codice di scripting lato server, consentendovi 
così di mettere in piedi un sito dinamico dal punto di 




Fig. 1- Scelta di 

compatibilità con 

il vecchio layout 

delle finestre. 




kspace layout you're most comfortable with. You can switch 
layouts later in Preferences. 




Dreamweaver MX Workspace 
I I HomeSite/Coder-Style 













!;=-— ■- I 






■ 

- 


j-Ba 




j, r 



O Dreamweaver 4 Workspace 



vista del contenuto offerto con agganci a database e 
interazioni complesse con l'attività dell'utente (con la 
versione precedente tale funzionalità era disponibile 
solo con l'edizione UltraDev del software, mentre 
adesso le caratteristiche di scripting lato server sono 
integrate nel prodotto di base). Grazie alle sue capa- 
cità, Dreamweaver mette in grado di creare pagine di- 
namiche anche molto sofisticate senza presupporre 
vaste conoscenze di programmazione, in quanto il co- 
dice viene generato automaticamente in base a scelte 
semplici e guidate, e sono supportati tutti i principa- 
li linguaggi di scripting attualmente più diffusi: ASP 
(sia con JScript che con VBScript), PHP con mySQL, 
JSP, ColdFusion e persino il nuovissimo .NET con C# o 
VB.NET. 

Relativamente all'interfaccia grafica, va detto innan- 
zitutto che i prodotti della suite MX di Macromedia 
presentano una interfaccia grafica coerente contri- 
buendo così a creare un senso di familiarità e a ridur- 
re i tempi di apprendimento. Nel caso di Dreamweaver 
MX, comunque, è data all'utente la scelta tra un am- 
biente compatibile con la versione 4 oltre al nuovo 
layout stile MX: la scelta viene proposta in fase di in- 
stallazione (come si vede nella Figurai), ma è possibi- 
le modificare l'impostazione tramite la finestra delle 
preferenze (Edit / Preferences / General / Change Workspace...) 
anche ad installazione completata. Potete vedere 
un'immagine della nuova GUI nella Figura 2: come po- 
trete notare, la filosofia dell'ambiente MX è la modu- 
larità. La finestra applicativa si compone di un'area di 
lavoro e tutta una serie di pannelli che possono esse- 
re spostati, ridotti a barra del titolo, raggruppati, etc. 
L'elenco completo dei pannelli a disposizione si trova 
sotto il menu Window: con <F4> è possibile nasconde- 
re contemporaneamente tutti i pannelli e lo stesso ta- 
sto funge da toggle per ripristinare la situazione pre- 
cedente. Grazie a questo sistema di pannelli configu- 
rabili, l'utente può sistemare il proprio ambiente di 
lavoro come più si confà alle proprie esigenze e ai 
propri gusti. Nella Figura 3 vi viene mostrato un esem- 
pio di come si possano riarrangiare i pannelli: per 
spostarli è sufficiente trascinare il titolo del pannello 
dall'estremità sinistra, per contrarli/ espanderli basta 
fare click sul titolo, infine per ulteriori opzioni (rino- 
minare, raggruppare, etc.) si clicca con il destro sem- 
pre sul titolo. 

CREARE PAGINE WEB 

Come accennavo prima, il prodotto gestisce la pagina 
web in tutti i suoi aspetti, entrando nel dettaglio an- 
che dell'HTML dinamico (lato client, in questo caso) 
venendo incontro sia al principiante con una serie di 
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azioni predefinite (i behaviour) da inserire nelle pa- 
gine e da associare agli eventi scatenati dagli utenti, 
che ai più esperti con ausili nella stesura di codice 
Javascript lato client. 

La stesura del codice della pagina può avvenire - co- 
me nella maggior parte degli editor HTML - in ma- 
niera visuale oppure scrivendo e componendo l'HTML 
direttamente a mano: la scelta della modalità di la- 
voro avviene ad opera del menu View con le sottovoci 
Code, Design e Code and Design, oppure tramite i pulsanti 
corrispondenti sulla toolbar. 
La Design View tenta di essere il più vicino possibile al 
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rendering del codice HTML, ma è comunque una buo- 
na norma testare sempre il proprio lavoro su un 
browser vero e proprio: potete creare il vostro elenco 
di browser da utilizzare tramite le preferenze (Edit / 
Preferences / Preview in Browser), scegliendo ovviamente tra 
quelli installati sul vostro sistema. 
Per creare una nuova pagina si seleziona File / New e si 
sceglie il tipo di documento da creare. Si hanno a di- 
sposizione una serie di file di base per le diverse ti- 
pologie di linguaggi e modelli che Dreamweaver ge- 
stisce, ma noi per oggi ci occupiamo di una semplice 



Fig. 2- la finestra 
di Dreamweaver 
con la GUI stile 
MX. 



Fig. 3 - Personal- 
izzazione dell'in- 
terfaccia grafica 
del prodotto. 



Fig. 4- llpopup 
dei code hints. 



pagina HTML. È interessante notare che il prodotto è 
in grado di generare codice compatibile con le spe- 
cifiche XHTML, cioè la versione di HTML derivata 
dall'XML, identica dal punto di vista sostanziale al- 
l'HTML 4.1, ma formalmente più precisa e sintattica- 
mente più rigida: nel futuro l'HTML sarà rimpiazzato 
da questa nuova "veste" del linguaggio di mark-up 
più diffuso, quindi può essere un'idea iniziare a svi- 
luppare i propri siti aderendo dal principio a queste 
specifiche (tanto, in fondo, fa tutto Dreamweaver, a 
patto di spuntare la check-box relativa nel dialogo di 
creazione del documento). 

Per preparare la vostra pagina avete a disposizione 
vari pulsanti sulla toolbar che velocizzano il vostro 
lavoro e non vi costringono a ricordare lunghi elen- 
chi di tag e loro attributi a memoria. Notate però che 
anche se decidete di codificare a mano la pagina, 
una nuova feature del prodotto viene comunque in- 
contro alla vostra memoria: si tratta di code hints, simi- 
le alla capacità di molti tool di programmazione di 
mostrare un elenco degli attributi di oggetti e delle 
variabili disponibili: la caratteristica è attiva di de- 
fault in maniera automatica, ma è possibile invocar- 
la manualmente premendo contemporaneamente 
<CTRL> + <SPACE>. 

La Figura 4 mostra un esempio di aiuto per gli attribu- 
ti del tag body: come vedete si tratta di una lista 
esaustiva che davvero velocizza e semplifica il com- 
pito di scrivere l'HTML direttamente. 
Per impostare la pagina nel suo complesso potete 
utilizzare le proprietà di pagina (Modify / Page Proper- 
ties... oppure <CTRL> + J o ancora dal menu conte- 
stuale cliccando col destro sull'area di lavoro). Si 
aprirà la dialog box relativa alle impostazioni di do- 
cumento, dove potete dare un titolo alla pagina (tag 
<TITLE>), impostare il set di caratteri (<META>) ed i 
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DISEGNARE 
IL CODICE 



La stesura del codice della pagina 
può avvenire - come nella mag- 
gior parte degli editor HTML - in 
maniera visuale oppure scriven- 
do e componendo l'HTML diretta- 
mente a mano: la scelta della 
modalità di lavoro avviene ad 
opera del menu View con le sot- 
tovoci Code, Design e Code and 
Design, oppure tramite i pulsanti 
corrispondenti sulla toolbar. 



vari attributi del tag <B0DY> (sfon- 
do, colori dei link, etc): una possi- 
bilità interessante è la tracing image, 
un'immagine che non c'entra nul- 
la con l'HTML e che vi viene mo- 
strata solo in Dreamweaver per 
darvi la possibilità di lavorarci so- 
pra, a mo' di ricalco. La composi- 
zione della pagina è gestita trami- 
te la toolbar di inserimento, attra- 
verso la quale si possono inserire i 
vari elementi nella Design View: la 
toolbar per lo più funziona anche 
in modalità Code View, il che può ri- 
sultare comodo anche per chi pre- 



Fig. 5 - Le pro- 
prietà della pag- 
ina web. 
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RIFERIMENTI 



Oltre alle informazioni di riferi- 
mento da consultare, per lavorare 
con i tag Dreamweaver vi mette a 
disposizione due palette special- 
izzate: quella delle Properties, 
che cambia a seconda del tag su 
cui posizionate il cursore e che 
contiene dei controlli per gestire 
gli attributi più significativi, e 
quella del Tag Inspector, che oltre 
a mostrare una visualizzazione ad 
albero del vostro documento vi 
mette a disposizione una lista 
meno intuitiva degli attributi, ma 
completa. 




ferisce scriversi la pagina in stile 
amanuense. Basta cliccare su uno 
dei pulsanti per attivare la finestra 
di dialogo che raccoglie tutte le 
informazioni necessarie per la 
creazione del tag. 
Si possono creare in questo modo 
dei link, delle immagini, delle ta- 
belle, dei frame in modo molto 
pratico e veloce. Molto articolata è 
anche la componentistica della 
toolbar relativa ai form. Da notare 
una comoda scorciatoia (il jump me- 
nu) che combina una combo box 
con del codice Java script che pas- 
sa a pagine diverse a seconda del- 
la scelta sul controllo: è un co- 
strutto relativamente semplice, ma 
è pur sempre comodo trovarselo già fatto. 
In tutte le finestre che operano sui tag è presente un 
testo cliccabile dal titolo Tag Info: cliccandoci sopra si 
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apre il manuale di riferimento sul tag in questione, 
con una ottima sintesi delle principali caratteristiche 
sintattiche e funzionali del tag stesso. 
Il manuale da cui sono tratte le informazioni è della 
O'Reilly, e non è l'unico in dotazione con Dreamwea- 
ver: nella palette Reference trovate della documenta- 
zione interessante su CSS, JavaScript e tecnologie 
server-side che potete consultare comodamente men- 
tre lavorate sui vostri siti. Oltre alle informazioni di 
riferimento da consultare, per lavorare con i tag 
Dreamweaver vi mette a disposizione due palette spe- 
cializzate: quella delle Properties, che cambia a secon- 
da del tag su cui posizionate il cursore e che contie- 
ne dei controlli per gestire gli attributi più significa- 
tivi, e quella del Tag Inspector, che oltre a mostrare una 
visualizzazione ad albero del vostro documento vi 
mette a disposizione una lista meno intuitiva degli 
attributi, ma completa. Nella finestra delle proprietà 
troviamo inoltre due interessanti caratteristiche: la 
possibilità di gestire il tag sia tramite attributi HTML 
che attraverso gli stili CSS, e la possibilità di creare 
link o riferimenti a file (quando questi siano richie- 
sti dal tag) tramite il drag & drop sull'icona del Point 
to File. 

La Figura 6 vi mostra il pulsante di switch tra HTML e 
CSS e il Point to File su cui trascinare i file dalla palette 
Files, insieme alla finestra di ispezione dei tag. 
Ovviamente le palette sono sincronizzate con la fine- 
stra di editazione visuale e del codice, per cui sele- 
zionando un elemento dall'albero dei tag viene sele- 
zionata la parte corrispondente nell'area di lavoro, 
così come avviene con la barra contestuale di navi- 
gazione del documento posta al fondo della finestra 
di editing. 

L'AIUTO OFFERTO DAL PRODOTTO 

Nella fase di preparazione di una pagina web può es- 
sere utile a volte riutilizzare delle parti di codice che 
costituiscono degli aspetti consistenti del nostro si- 
to: a questo fine, Dreamweaver vi offre una caratte- 
ristica che vi permette di creare dei blocchi di HTML 
richiamabili a comando. 

Si tratta degli snippet, per i quali esiste una palette 
a parte e che rappresentano frammenti di codice che 
si possono inserire nella pagina cliccando due volte 
su di essi nella palette. Sono di due tipi: 

1) wrap, inseribili prima e dopo la selezione corrente 
sul testo del codice. 

2) block, un unico blocco di HTML da incastrare nel 
documento. 
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La gestione degli snippet (creazione, catalogazione, 
etc) avviene tutta all'interno della palette relativa, 
mentre - come dicevo sopra - per inserire uno snip- 
pet nel documento bisogna fare doppio click sullo 
snippet sempre sulla palette(Fig.7). 
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Infine, per concludere questa parte sulle caratteri- 
stiche di base del prodotto, non possiamo non accen- 
nare ai controlli che Dreamweaver vi permette di ef- 
fettuare sulle pagine che scrivete, sia che siano sta- 
te composte automaticamente che codificate ma- 
nualmente. 

Una serie di controlli di validità del codice HTML dal 
punto di vista formale vi consente di essere sicuri 
che anche i browser più rigidi quali Netscape accetti- 
no la pagina dal punto di vista dell'HTML e la possa- 
no visualizzare correttamente. 
Per controllare quello che è stato scritto selezionate 
File / Check Page / Validate Markup... per validare il codice 
come HTML, oppure File / Check Page / Validate as XML... se 
utilizzate XHTML. 

Inoltre potete richiedere una validazione specifica a 
fronte di un dato browser tra quelli supportati da 



Fig. 6 - tag inspec- 
tor, properties e 
code navigator. 



Fig. 8 - Ecco il 

risultato del test 

di compatibilità 

del nostro codice 

con l'Explorer 5.0 

di Microsoft 



Fig. 7 - Layout e 
codice sempre 
sottocontrollo, e 
con gli snippet 
pronti all'uso! 



Dreamweaver: selezionando File / Check Page / Check Target 
Browsers... (Fig. 8) vi viene richiesto con quale browser 
volete verificare la compatibilità del vostro docu- 
mento. 
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In tutti i casi sopraelencati, alla fine della valida- 
zione si aprirà una finestra di palette adeguata con 
i risultati dell'operazione, da cui potrete prendere 
spunto per eventuali correzioni al vostro codice. 
Un altro check-up interessante offerto da Dream- 
weaver è quello dell'accessibility. 
Questo termine sta ad indicare la possibilità che la 
pagina venga utilizzata con successo su browser per 
portatori di handicap (ad esempio, per i non veden- 
ti) e che contenga quindi gli attributi e i tag neces- 
sari per fornire informazioni supplementari utili alle 
persone portatrici di handicap (ad esempio, le im- 
magini devono contenere l'attributo alt affinché i 
browser per ciechi possano "leggere" la descrizione 
della figura). Tale controllo viene richiesto tramite 
File / Check Page / Check Accessibility e restituisce una lista 
di tutte le incongruenze rispetto alle esigenze dei 
navigatori HTML che rispondono ad esigenze parti- 
colari. 



COSA BOLLE IN PENTOLA 

Per oggi abbiamo dato una veloce occhiata alle ca- 
ratteristiche di base di Dreamweaver e agli aiuti che 
offre per creare una pagina web. Successivamente 
parleremo delle capacità di questo meraviglioso 
software di gestire interi siti e verificare la validità 
dei link tra le varie pagine. Parleremo anche dei 
template e di come questi semplifichino di molto il 
compito di creare siti con un look consistente. 
Tra le funzioni più avanzate ci sono i vari wizard per 
la creazione di pagine dinamiche lato server, con 
molto codice già scritto e da customizzare: parlere- 
mo anche di questo, concentrandoci sempre su quel- 
lo che si può fare in maniera automatica con Dream- 
weaver, per scoprire come può esserci di aiuto per 
essere più produttivi. 

A questo punto quindi non mi resta che salutarvi, e 
darvi appuntamento alla prossima puntata! 

Federico Mestrone 
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Come creare 
una connessione 

locale per 

scambiare dati 

tra due filmati 

Flash 

Una delle più interessanti novità 

introdotte da Flash MX è l'oggetto 

LocalConnection, che permette di 

inviare e ricevere dati tra filmati 

distinti, che consente anche di mettere 

in comunicazione filmati eseguiti in 

applicazioni differenti. 



Sul CD 

\soft\codice\local.zip 



D 



urante lo sviluppo di un progetto sul web, l'impor- 
tanza di una tecnica di comunicazione tra diversi fil- 
I man* può essere rilevante. Con la versione 5 di Flash, 
per ottenere lo scambio di dati tra due oggetti ese- 
guiti sullo stesso client era necessario ricorrere agli 
FScommand oppure a JavaScript, ottenendo risultati non sempre ap- 
prezzabili, soprattutto quando si incappava nei soliti problemi di 
incompatibilità tra browser diversi. Ipotizziamo ad esempio di do- 
ver sviluppare un sito in HTML nel quale solo una determinata se- 



Fig. 1- Nella 

libreria si possono 

vedere un simbolo 

grafico, un clip 

filmato e 5 

pulsanti già pronti 

per l'uso. 
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zione è contraddistinta da un banner realizzato con Flash MX, e 
supponiamo di voler controllare questo banner con dei pulsanti 
posti in un'altra parte del sito: grazie al nuovo oggetto LocalCon- 
nection oggi un'operazione simile è davvero semplice. In pratica, 
basta inserire alcune semplici righe di codice ActionScript sia nel 
filmato che invia i dati sia nel filmato che li riceve. I dati in que- 
stione possono essere di qualsiasi tipo: coordinate che gestisco- 
no il movimento di clip filmati, valori booleani, stringhe di testo 
e così via. Basterà decidere in base a quale evento generato dal- 
l'utente deve avvenire l'invio dei dati (ad esempio la pressione di 
un tasto il movimento del mouse ecc..) per impostare una con- 
nessione locale tra i due filmati, che dialogheranno come se fa- 
cessero parte di un solo oggetto. Un esempio on line è disponibi- 
le all'indirizzo www.dynamicdesign.it /locai, mentre nella cartella 
\soft\codice\local.zip del cd-rom allegato alla rivista sono stati messi 
a disposizione sia i file sorgenti completi che una versione in- 
completa che useremo come punto di partenza nel corso di que- 
sto tutorial. Il risultato finale del nostro lavoro saranno due fil- 
mati flash denominati invio.fla e ricevi.fla, che poi esporteremo e po- 
sizioneremo in una stessa pagina denominata index.html. Apriamo 
quindi il file inviojncompleto.fla che si trova sul cd-rom e salviamolo 
come invio.fla in una cartella del nostro hard disk. Questo file è do- 
tato nella sua libreria di tutti i pulsanti, i clip e gli elementi gra- 
fici necessari alla realizzazione del nostro tutorial: non ci dilun- 
gheremo sullo sviluppo della parte grafica per poterci dedicare 
con maggiore attenzione al codice che aggiungeremo al suo in- 
terno (Figura 1). Creiamo tre nuovi livelli premendo il tasto Inseri- 
sci livello e chiamiamoli rispettivamente, dal basso verso l'alto: pul- 
santi, grafica e azioni. Nel livello pulsanti inseriamo quindi delle istanze 
dei pulsanti on e off, prelevandoli dalla libreria e posizionandoli in 
basso a destra, uno accanto all'altro. Nella parte in alto a sinistra 
dello stage, invece, inseriamo i tre pulsanti colorai, colore2 e norma- 
le, disponendoli uno sopra l'altro. Preleviamo l'unico clip della li- 
breria e, dopo avergli dato come nome di istanza segno (nel pan- 
nello Proprietà), posizioniamolo accanto al pulsante maschera off. In- 
fine, nel livello grafica, inseriamo i due simboli grafici titolo e fa- 
scia. A questo punto possiamo associare il codice ai nostri pulsan- 
ti. Selezioniamo il pulsante off, apriamo il pannello Azioni (Finestra> 
Azioni) e inseriamo il seguente codice: 

1 on(release){ 

2 valore="acceso"; 

3_root.segno._x=10; 



4} 



Al rilascio del pulsante viene passata alla variabile valore la strin- 
ga "acceso", mentre il clip segno viene posizionato accanto al pul- 
sante on. Discorso analogo per il pulsante on, che però avrà un co- 
dice del tipo: 

1 on(release){ 



2 valore="spento"; 



3_root.segno._x=114; 
4} 
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A questo punto possiamo inserire il codice nel fotogramma azio- 



Woot.onMouseMove = func tionQ { 



2 invia = new Local ConnectionQ 

3 invia.sendC'tutorial", "metodo" 



root._xmouse, 
root._ymouse,_root.valore,_root.colore); 



4 invia.closeO; 



Fig. 2 - Nel livello 
pulsanti sono 
posizionati cinque 
pulsanti e un clip, 
necessari per 
attivare gli eventi 
che 

condizioneranno 
l'altro filmato 
flash. 



Per il pulsante colorel il discorso è ancora più semplice, in quanto 
il solo valore messo in gioco è la variabile colore. Inseriamo un co- 
dice identico a quello di colore 1 (mostrato nella Figura 3) nei pul- 
santi colore2 e normale, cambiando il valore attribuito alla variabile 
colore, che sarà rispettivamente: "due" e "tre". 



Fig. 3 - In questo 
caso, cliccando il 
tasto viene 
passata alla 
variabile colore la 
stringa "uno". 



5} 



Per quanto riguarda _root.onMouseMove=function() {istruzioni}, rientria- 
mo nella prassi delle "tradizionali" istruzioni ActionScript, che ri- 
guardano la gestione di un singolo filmato. Si tratta cioè del ge- 
store di evento onMouseMove, che, attraverso questa sintassi, intro- 
dotta a partire dall'ultima versione di Flash, consente di definire 
una funzione che verrà eseguita al verificarsi dell'evento. 
In altre parole, le istruzioni comprese tra le parentesi graffe sa- 
ranno eseguite ogni volta che l'utente muoverà il mouse. 
Nel nostro caso, però, le istruzioni non coinvolgono questo fil- 
mato, ma un altro che non abbiamo ancora definito. Nella riga 
numero 2, viene creata un'istanza dell'oggetto LocalConnection de- 
nominata invia. Successivamente (riga 3), a questa istanza viene 
applicato il metodo send(), la cui sintassi generale può essere così 
schematizzata: 



Fig. 4 - L'istruzione 

condizionale if 

rimanda indietro la 

testina al 

fotogramma 2, fino 

a quando non sono 

stati scaricati sul 

client dell'utente 

tutti i kb del 

filmato. 



nomeistanza.send(nomeconnesione,nomemetodo, parametroj , 
parametro_2 parametro_n) 

Questo metodo definisce: un nome univoco che sarà usato du- 
rante la connessione locale, il nome di un metodo creato apposi- 
tamente per la connessione locale ed una serie di valori da in- 
viare allo stesso filmato ricevente. Nel nostro codice abbiamo in- 
dicato come nome della connessione la stringa "tutorial", come no- 
me del metodo il termine generico "metodo" e, come parametri, la 
coordinata x del mouse è la coordinata y del mouse. Infine ab- 
biamo specificato l'invio delle variabili valore e colore. Mentre le 
coordinate del mouse vengono determinate dal movimento ope- 
rato dall'utente, il valore delle variabili è definito dai pulsanti 
messi a disposizione nel filmato. Per cui, se l'utente preme ad 
esempio il pulsante colore2, a questo sarà attribuita la stringa 
"due". Per finire, non ci resta che commentare il metodo close(), da 
utilizzarsi quando si vuole che l'oggetto non accetti più istruzio- 
ni: è un procedimento necessario per poter applicare il metodo 
connect() che usa lo stesso parametro nomeconnesione nel nostro fil- 
mato ricevente. In un certo senso è come se definisse la quan- 
tità di dati da inviare al termine dell'evento (nel nostro caso, il 
movimento del mouse) che gestisce la connessione locale. Una 
volta ultimato il filmato invia.fla, salviamolo e procediamo alla pub- 
blicazione con File>Pubblica: nella cartella dove si trova il file sor- 
gente verranno generati i file invia.html ed invia.swf. A questo punto 
possiamo procedere alla realizzazione del secondo filmato: prele- 
viamo dal cd-rom ricevijncompleto.fla e salviamolo come ricevi.fla nel- 
la stessa cartella in cui abbiamo posizionato il file precedente. 
Anche in questo caso sono già disponibili nella libreria gli ele- 
menti grafici necessari. Questo file, a differenza del precedente, 
poiché contiene una foto prelevata da una raccolta di Maxi Photo 
Collection (la rivista che la nostra casa editrice dedica alla fotogra- 
fia e alla grafica digitale), peserà qualche kb in più. Per questo 
motivo è necessario aggiungere un semplice precaricamento. At- 
tiviamo quindi il pannello Scena (Finestra>Scena) e selezioniamo la 
scena precaricamento: cosi facendo ci posizioneremo in una scena 
già creata in precedenza e disposta prima della scena principale. 
Apriamo la libreria e preleviamo il simbolo grafico scritta, per poi 
posizionarlo al centro dello stage con il pannello Allinea (Finestra>AI- 
linea). Selezioniamo il fotogramma successivo e trasformiamolo in 
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1 if (getBytesLoadecìO <getBytesTotal () ) { 

2 gotoAndPlay(l) ; 
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fotogramma chiave vuoto ( lnserisci> Fotogramma chiave vuoto). Infine 
inseriamo una semplice istruzione condizionale che impedisca al- 
la testina di andare avanti fino a quando non sia stato scaricato 
tutto il filmato ricevLswf. Attraverso il tasto Modifica scena o tramite il 
pannello Scena torniamo sulla scena principale e creiamo tre livel- 
li, che dal basso verso l'alto chiameremo rispettivamente: sfondo, 
clip e azioni. 

Apriamo la libreria e posizioniamo al centro dello stage nel primo 
livello il clip sfondo, ricordandoci di dargli come nome istanza sfondo; 
selezioniamo poi il secondo livello e, dopo avere prelevato dalla 
libreria dipi, posizioniamolo al centro dello stage. Infine, con il 
pannello Proprietà, diamo al clip il nome istanza dipi. Dopo aver posi- 
zionato i clip che compongono la parte grafica del filmato, pos- 
siamo dedicarci al codice, che inseriremo nel primo fotogramma 
del livello azioni. 

Prima di tutto definiamo la porzione di codice non riferita alla 
connessione locale: 



se i due parametri si chiamano diversamente. H metodo connect() 
prepara un oggetto LocalConnection a ricevere istruzioni da un co- 
mando LocalConnection.send(), ed ha come parametro il nome della 
connessione specificato nel filmato mittente. Analizziamo quin- 
di la parte il codice inserito nel filmato ricevLfla a partire dalla se- 
sta riga: 

6 ricevi = new LocalConnectionQ; 

7 ricevi.metodo = function(var1, var2, var3,var4) { 

8 clip1._x = vari; 

9 clip1._y = var2; 



10 if (var3 == "acceso") { 



11 sfondo.setM ask(clip1 ); 



12} 



13 else if(var3== "spento") { 



14 sfondo.setMask(null); 



15} 



1 StOpQ; 



2clip1._alpha=50; 



3 _root.onEnterFrame=function(){ 



4 _root.clip1._rotation+=8; 




5} 



Con queste prime righe non facciamo altro che dare uno stop, in 
modo da impedire di riavviare nuovamente il precaricamento; in- 
oltre, attribuiamo alla proprietà _alpha del dipi una trasparenza pa- 
ri a 50 e, attraverso l'evento onEnterFrame, incrementiamo ad ogni 
lettura di fotogramma la proprietà _rotation del clip filmato dipi (che 
quindi ruoterà sul suo asse continuamente). A partire dalla riga 
seguente (vedere riga 6 più avanti) viene invece stabilita una 
connessione locale che riceve i dati inviati dal filmato invia.swf. Lo 
schema generale del codice da inserire nel filmato ricevente è in 
genere del tipo: 

nomeistanzaricevente = new LocalConnectionQ; 

nomeistanzaricevente.nomemetodo = function 

(parametroJ,parametro_2 parametro_n) { 

//istruzioni che utilizzano i parametri indicati 

} 

nomeistanzaricevente.connectC'nomeconnesione"); 

In pratica, dopo aver istanziato un nuovo oggetto LocalConnection, 
viene applicato a quest'ultimo il metodo creato nel filmato mit- 
tente, cioè nel filmato che invia i dati. I parametri indicati sono 
corrispondenti a quelli che vengono specificati nel metodo send() 
nel filmato mittente. Anche se questi parametri si chiamano di- 
versamente, viene comunque creata una corrispondenza in base 
all'ordine in cui sono disposti: quindi se, ad esempio, con il me- 
todo send() abbiamo indicato la stringa "prova" come valore del pri- 
mo parametro, questo valore sarà passato al primo parametro di 
function() nel filmato destinatario (il filmato che riceve i dati). Poi- 
ché quello che conta è la corrispondenza a livello di posizione dei 
due parametri, la comunicazione tra i due filmati avviene anche 
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Alla proprietà _x e _y del dipi vengono passate le coordinate del 
mouse che l'utente determina muovendosi sul filmato mittente, 
per cui il movimento effettuato sul filmato invia avrà un effetto sul 
filmato ricevi. Oltre ad applicare il principio generale, attraverso 
delle semplici if, decidiamo l'istruzione da eseguire in base al va- 
lore di var3, che a sua volta corrisponde al parametro del filmato 
mittente _root.valore e viene deciso in base alla scelta operata dal- 
l'utente. Le istruzioni condizionali prevedono due possibilità: al- 
la variabile viene assegnata una stringa il cui valore è "acceso" 
oppure "spento". Nel primo caso, viene applicato il metodo, (di- 
sponibile a partire da Flash MX), che consente di usare come ma- 
schere i clip filmati - la cui funzione di maschere può essere atti- 
vata o disattivata in fase di esecuzione. La sintassi davvero mol- 
to semplice è del tipo: Clip_da_mascherare.setMask(clip_maschera); nel- 
la riga 11 del nostro listato specifichiamo che intendiamo appli- 
care una maschera al clip sfondo e che vogliamo che tale masche- 
ra sia costituita da dipi. Per disattivare la modalità maschera as- 
sunta dal clip, basta applicare lo stesso metodo specificando co- 
me parametro nuli. A partire dalla riga 16 c'è una sequenza di tre 
istruzioni condizionali che invece impostano il colore del clip sfon- 
do in base al valore di var4, che raccoglie i dati inviati dalla varia- 
bile colore del filmato invia. 

16if(var4=="due"){ 

17 nuovo=new ObjectQ; 

18 nuovo.ra=-100: 



19nuovo.rb=0; 



20nuovo.ga=100; 



21 nuovo.gb=4; 



22 nuovo.ba=52; 



23nuovo.bb=-19; 



24nuovo.aa=100; 



25 nuovo.ab=0; 



26 miocolore=new ColorC'sfondo"); 

27 miocolore.setTransform(nuovo); 
28} 
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Questo procedimento costituisce la tecnica utilizzata normal- 
mente per impostare attraverso ActionScript la colorazione, che è 
possibile applicare ai simboli sfruttando le opzioni disponibili nel 
pannello delle proprietà scegliendo tra le opzioni del menu colore 
avanzato e premendo successivamente il tasto impostazioni. Se la con- 
dizione è verificata, viene creato un oggetto generico in cui so- 
no impostate otto proprietà che corrispondono alle otto opzioni 
messe a disposizione nel pannello Effetto. Infine viene creata un' 
istanza dell'oggetto Color (riga 26) e viene applicato il metodo set- 
Transform(), che ha come parametro l'oggetto appena creato. Que- 
sto tipo di colorazione, a differenza di quella semplice, che uti- 
lizza il metodo setRGB(), è particolarmente indicata per i clip ca- 
ratterizzati (come nel nostro caso) da una bitmap. 
Le rimanenti istruzioni condizionali che contengono comandi 
analoghi a quelli appena analizzati, impostano, in base al valore 
assunto della variabile var4, altre due colorazioni differenti, una 
con sfumatura verde e un'altra che ripristina i valori "di default" 
della foto. 



Fig. 5- Il primo dei 

duetag <-img-^ 

presenti nella 

tabella html. 



finito nel filmato mittente. Nel nostro caso sarà: 

56 ricevi.connectC'tutorial"); 

Ultimato anche il filmato ricevi.fla, non ci resta che procedere al- 
la pubblicazione con FiloPubblica. 



WSBM 



File Modifica Form 



m 



</head> 

<body> 

<table border="0" ceHspacing="3" align— ' center" > 

<tr><td colspan="2" style— 'font-farnily: verdana; font-size:14pt; color :#990000"> 

<tr> 

<td> 

e border="0" cells] 



</td></tr> 

<tr><td> 

< spari clas ati</span> 

</td></tr> 

</table> 



29 if(var4=="due"){ 



30 nuovo=ne w ObjectO; 



31 nuovo.ra=-100; 



32 nuovo.rb=0; 



33nuovo.ga=100; 



34 nuovo.gb=4; 



35 nuovo.ba=52; 



36nuovo.bb=-19; 



37 nuovo.aa=100; 



38 nuovo.ab=0; 



39 miocolore=new ColorC'sfondo"); 



40 miocolore.setTransform(nuovo); 



41} 



42 if(var4=="tre"){ 



43 nuovo=ne w ObjectO; 



44nuovo.ra=100; 



45 nuovo.rb=0; 



46 nuovo.ga=100; 



47 nuovo.gb=0; 



48nuovo.ba=100; 



49 nuovo.bb=0; 



50 nuovo.aa=100; 

51 nuovo.ab=0; 



52 miocolore=new ColorC'sfondo"); 

53 miocolore.setTransform(nuovo); 
54} 



55} 



Una volta definite le istruzioni da eseguire usando le variabili ri- 
cevute, applichiamo il metodo connection(), che restituisce un va- 
lore booleano true, se nessun altro processo in esecuzione sullo 
stesso client ha già applicato questo comando utilizzando lo stes- 
so valore per nomeconnessione mentre, in caso contrario, restituisce 
false. Il metodo connection() si applica all'istanza del filmato desti- 
natario ed ha come unico parametro il nome di connessione de- 



Fig. 6- Il filmato in 

basso a destra 

viene controllato 

in base ai 

movimenti operati 

sul primo in alto a 

sinistra. 



Sempre nel cd-rom allegato alla rivista, è stato fornito il file in- 
dex jncompleto.html: preleviamolo e posizioniamolo nella cartella 
in cui si trovano i due file swf e i relativi file html creati duran- 
te la pubblicazione. Se osserviamo il sorgente, possiamo nota- 
re che questo file html è costituito da una tabella che ingloba 
del testo di esempio e una gif, richiamata in due differenti cel- 
le, la cui unica funzione è segnalare i punti vanno inseriti i 
due filmati swf. 

Apriamo quindi il file invia.html e, dopo aver selezionato la por- 
zione di codice che va da <object> ad </object> copiamola. Suc- 
cessivamente, apriamo il file indexJncompleto.html e incolliamo 
quanto copiato al posto del primo dei due tag <img>. 





Esempio di connessione locale 
LocalConnection ™ lDre1 ■ 

colore? ■ 
normale ■ 




esto di esempio testo di esempio testo di 
esempio testo di esempio testo di esempio 
esto di esempio testo di esempio testo di 
esempio testo di esempio testo di esempio 




maschera on V ma schiera off 


ssempio testo di esempio testo di esempio 
esto di esempio testo di esempio testo di 
;sempio testo di esempio testo di esempio 
esto di esempio 




oggetto che invia i dati 

esto di esei ipio testo di 
ssernpio testo di esempio testo di esempio 
esto di esempio te: i ipio testo di 
3sernpio testo di esempio testo di esempio 
esto di esei ipio testo di 
esempio testo di esempio testo di esempio 
esto di esempio tes ipio testo di 
Bsernpio testo di esempio testo di esempio 
esto di esempio 




oggetto che riceve i doti 





Ripetiamo la stessa operazione copiando il tag <object>< 
/object> del file ricevi.html e incollandolo al posto del secondo 
tag <img> del file indexJncompleto.html. 

A questo punto è possibile rinominare il file, chiamandolo in- 
dex.html e lanciarlo per un'anteprima. 

Maurizio Battista 
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PHP-NUKE 6.0 WEB PORTAL SYSTEM 



PHP-Nuke 6.0 
Web portai 

SySIGItl (parte seconda) 

Nello scorso appuntamento abbiamo 
analizzato le caratteristiche di PHP- 
Nuke, il più conosciuto CMS (Content 
Management System) Open Source. 
Questo mese vedremo come 
configurare il sistema e come 
personalizzarne la grafica. 



Sul CD 

\soft\codice\ 
Sorgente_webmatrix1 .zip 



I! 



, I mese scorso abbiamo visto quali siano l'utilità e le 
funzioni di un generico sistema per la gestione dei 
contenuti (CMS), con particolare riferimento a PHP- 
Nuke (http://phpnuke.org), il popolare sistema per lo svi- 
i luppo di portali, interamente scritto in PHP. Inoltre ab- 
biamo esaminato i passi necessari per installare PHP-Nuke sia 
in locale, sul nostro PC (o server) di casa, che in remoto su 
uno spazio web gratuito, più precisamente quello messo a di- 
sposizione da Lycos (http://www.tripod.lycos.co.uk/myaccount /freeho- 
sting). Completata con successo l'installazione possiamo af- 
frontare la fase di configurazione, in modo da personalizzare 
il nostro nuovo portale. Per prima cosa entriamo nella pagina 
di amministrazione che troviamo, nel caso di installazione in 
locale, all'URL http://localhost/admin.php. Dopo aver specificato i 
dati dell'amministratore (ID e password) ci verrà presentata la 
schermata di amministrazione, che contiene tutte le icone 
che consentono di accedere alle diverse sezioni e funzionalità 



Fig. 1 - I moduli a |™ 
disposizione di 
PHP Nuke. 
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del sito. I primi parametri che dovremo personalizzare saran- 
no quelli relativi alla sezione Preferences. All'interno di questa 
sezione troveremo diverse voci, ma quelle più importanti per 
il corretto funzionamento del portale sono poste nel primo ri- 
quadro (General Site Info), più in particolare andranno specifica- 
te le voci: 

• Site Name il nome del sito, utilizzato sia come titolo per 
le pagine del portale, sia come contenunto di alcuni me- 
ta tag; 

• Site Slogan utile per indicare una "descrizione" del conte- 
nuto del sito, infatti questa informazione sarà utilizzata 
da PHP-Nuke per comporre il meta tag "description"; 

• Site Start Date data di pubblicazione del sito; informazio- 
ne utilizzata dal modulo Statistics (statistiche di accesso al 
sito); 

• Administrator Email email dell'amministratore del sito, al 
quale saranno inviate le comunicazioni di servizio e quel- 
le inoltrate dagli utenti tramite il modulo Feedback; 

• Allow Anonymous to Post? tramite questa voce potremo 
specificare se permettere agli utenti anonimi, cioè quelli 
che non hanno un account sul nostro sito, di scrivere 
commenti; 

• Default Theme for your site permette di selezionare l'a- 
spetto grafico (tema) del sito. PHP-Nuke 6.0 dispone di 
diversi temi già pronti, ma molti altri possono essere sca- 
ricati dalla rete; 

Queste rappresentano solo le impostazioni di base, cioè il mi- 
nimo insieme di informazioni da fornire al sistema per poter 
funzionare. L'area Preferences permette di impostare molte altre 
caratteristiche in modo da poter realizzare il portale più adat- 
to alle nostre esigenze. 

FUNZIONALITÀ DEL PORTALE 

A questo punto siamo pronti ad impostare il nostro portale in 
modo che possa contenere e gestire solo i servizi e le infor- 
mazioni che ci intressano. Supponiamo di voler realizzare un 
sito dotato di 4 funzionalità di base, in modo da gestire: no- 
tizie, download, sondaggi e link. Gli strumenti messi a dispo- 
sizione da PHP-Nuke per gestire queste informazioni sono i 
moduli, componenti che saranno mostrati nella parte centra- 
le delle pagine del portale. Quindi, sempre dalla sezione di 
amministrazione, clicchiamo sull'icona Modules e configuriamo 
i moduli in base alle nostre esigenze. La tabella che ci verrà 
mostrata (Fig. 1) raccoglie tutti i moduli di cui dispone PHP- 
Nuke, insieme ai link tramite i quali modificarli. In particola- 
re, per ogni modulo, saranno mostrate le seguenti informa- 
zioni: 

• Title indica il titolo del modulo; corrisponde al nome del- 
la directory (relativa alla /modules) nella quale si trova il co- 
dice PHP del modulo; 
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• Custom litle indica il nome con il quale il modulo sarà vi- 
sualizzato sul portale; 

• Status indica lo stato del modulo: attivo, inattivo, oppu- 
re attivo in homepage; 

• Visible to indica gli utenti abilitati alla visualizzazione del 
modulo: tutti gli utenti, solo gli amministratori, oppure 
solo gli utenti registrati; 

• Functions contiene i link alle funzioni di amministrazio- 
ne del modulo: modifica, attivare/ disattivare, visualizza- 
re in homepage; 

A questo punto possiamo modificare le impostazioni dei mo- 
duli, tramite i link Activate/Disactivate della colonna Functions, in 
modo da rendere attivi solo quelli che serviranno ai nostri 
scopi, e cioè: 

• News 

• Downloads 

• Surveys 

• Web Links 
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INSERIAMO I CONTENUTI 

Dopo aver effettuato la configurazione base del nostro nuovo 
portale, siamo pronti a definire ed inserire i contenuti. In ge- 
nere, il modulo più utilizzato dai siti costruiti tramite PHP- 
Nuke, non a caso è impostato anche come default per l'ho- 
mepage, è quello delle News. Iniziamo con definire quali argo- 
menti (topic) saranno affrontati dalle notizie pubblicate sul si- 
to. Quindi entriamo nella sezione Topics, eventualmente can- 
celliamo i topic che non ci interessano ed inseriamo i nuovi. 
I campi richiesti per l'inserimento di una nuova categoria so- 
no: 

• Topic Name indica il nome dell'argomento, ma solo per 
uso interno, va quindi indicato senza spazi e della lun- 
ghezza massima di 20 caratteri; 

• Topic Text indica la descrizione completa (massimo 40 ca- 
ratteri) del topic; 

• Topic Image rappresenta l'immagine associata al topic; 
possiamo aggiungerne di nuove copiandole nella direc- 
tory /images/topics/; 



Come possiamo notare, una delle righe relative ai moduli di- 
sponibili in PHP-Nuke, solitamente quella delle News, è evi- 
denziata in grassetto. Questo sta ad indicare che il modulo al 
quale corrisponde sarà quello mostrato nell'homepage del no- 
stro portale, per variarlo non dovremo fare altro che interve- 
nire sul link Put in Home, in corrispondenza del modulo che in- 
tendiamo attivare. La seconda impostazione che determina le 
funzioni del portale che intendiamo costruire è quella dei 
blocchi, cioè i box laterali che sono visualizzati su ogni pagi- 
na di PHP-Nuke. 

Per configurarli basterà accedere all'apposita area di ammini- 
strazione tramite il link Blocks. 
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Questa pagina (Fig. 2) è abbastanza simile a quella vista prece- 
dentemente, la differenza maggiore consiste nella possibilità 
di stabilirne la posizione (Position), cioè se visualizzarlo nella 
colonna di destra o di sinistra, e l'ordine (Weight); infatti non 
dobbiamo dimenticare che i blocchi, a differenza dei moduli, 
saranno mostrati tutti contemporaneamente. 



Fig. 3- Perla 

nostra prova 

abbiamo inserito 

tre topic relativi 

ad altrettante 

riviste, e 

precisamente: 

"Programmare il 

Web", 

"ioProgrammo" e 

"Linux Magazine" 



Fig. 2 - La figura è 
abbastanza simile 
alla Figura 1; 
la differenza 
maggiore consiste 
nella possibilità di 
stabilirne la 
posizione 
(Position). 



Per la nostra prova inseriremo 3 topic relativi ad altrettante ri- 
viste, e precisamente: "Programmare il Web", "ioProgrammo" 
e "Linux Magazine" (Fig. 3). 
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Quindi possiamo entrare nella sezione Add Story ed iniziare ad 
inserire le notizie. Per ognuna di esse dovremo indicare le 
classiche informazioni quali: titolo, argomento, descrizione 
breve e testo; ma inoltre avremo la possibilità di indicare se 
attivare o meno i commenti degli utenti, pubblicarla subito 
oppure in corrispondenza di una data ed ora prefissati, ed in- 
fine se allegare un sondaggio alla notizia. Passiamo ora a 
riempire la sezione dedicata al download; innanzitutto en- 
triamo nell'apposita area di amministrazione tramite l'icona 
Downloads ed iniziamo a definire le categorie in base alle quali 
suddividere i file. PHP-Nuke ci permette di organizzare il 
software tramite categorie e sottocategorie; ad esempio po- 
tremmo creare la categoria "Software" e, al suo interno, creare 
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le sottocategorie "Windows", "Linux", ecc. Solo dopo questa fase 
potremo iniziare ad inserire i programmi che intendiamo ren- 
dere disponibili ai nostri utenti/visitatori. In pratica per ogni 
programma dovremo riempire una scheda specificando: il no- 
me, il link da cui scaricarlo, la categoria/sottocategoria a cui 
appartiene, la descrizione, il nome e l'email dell'autore, la di- 
mensione in byte, la versione, l'homepage ed il numero di hits 
iniziali, cioè il numero di volte che il file è stato scaricato. Co- 
me avrete avuto modo di notare, l'inserimento dei contenuti 
è un'operazione abbastanza semplice ed agevole da compiere. 
Infatti, oltre ad avvenire tramite semplici interfacce web, il si- 
stema nella sua complessità è abbastanza lineare e coerente. 
Pertanto, considerando inoltre che le operazioni da compiere 
per riempire le altre sezioni del sito sono analoghe a quelle 
appena vista, non ci dilungheremo oltre lasciandovi il compi- 
to per esercizio. 

PERSONALIZZARE LA GRAFICA 

Probabilmente una delle prime domande che si pone un nuo- 
vo utente di PHP-Nuke riguarda la personalizzazione della 
grafica. Per questi scopi vengono utilizzati i temi (themes), al- 
cuni già disponibili nel pacchetto di PHP-Nuke. Se questi non 
dovessero essere di nostro gradimento, o semplicemente de- 
sideriamo avere per il nostro sito un aspetto un po' più origi- 
nale, potremmo cercare in rete qualcosa di più adatto. Sono 
infatti decine i siti che offrono temi per PHP-Nuke, sia gra- 
tuitamente che a pagamento. In genere vengono distribuiti in 
un file compresso (.zip, .tgz, .ecc) che, una volta scaricato, do- 
vrà essere decompresso nella directory /themes/; quindi dovre- 
mo accedere all'area di amministrazione, scegliere l'icona Pre- 
ferences ed indicare, alla voce Default Theme for your site il nome 
del tema che abbiamo appena installato. 
Naturalmente, per creare veramente qualcosa di originale, la 
cosa migliore da fare sarebbe quella di creare un proprio te- 
ma. L'operazione può sembrare complessa, ma con una mini- 
ma conoscenza del linguaggio PHP, ed ovviamente dell'HTML, 
e magari iniziando a modificare un tema già pronto, non sarà 
difficile ottenere risultati soddisfacenti. 
Come abbiamo già visto i temi si trovano nella directory /the- 
mes/, analizzandone il contenuto notiamo però un piccolo pro- 
blema, cioè la diversa organizzazione dei file. Infatti, a parte 
le directory standard images e style che contengono rispettiva- 
mente le immagini (icone ed altro) ed il foglio di stile utiliz- 
zati dal tema, notiamo 2 diverse implementazioni. 
La prima, ad esempio quella utilizzata da DeepBlue (tema di de- 
fault), è realizzata in pratica tramite un unico file, themcphp, 
che include al suo interno sia il codice PHP necessario al si- 
stema, sia il codice HTML relativo alla presentazione grafica 
del tema. 

La seconda modalità utilizzata dai temi, ad esempio utilizza- 
ta da 3D-Fantasy, prevede invece una gestione più modulare, 




Fig.4-Un 

esempio di un 

semplice tema 

ottenuto 

modificando il 

DeepBlue 



tramite l'utilizzo di diversi file HTML/PHP che vengono ri- 
chiamati (inclusi) dal themcphp: 



blocks.html per la gestione dell'aspetto grafico dei bloc- 
chi laterali; 

center_right.html per la gestione dello spazio che inter- 
corre tra la zona centrale dalla colonna destra; 
footer.html per la gestione dell'aspetto grafico del footer, 
ossia il riquadro a fondo pagina; 
header.html per la gestione dell'aspetto grafico dell'hea- 
der, ossia l'intestazione della pagina (logo, banner, ecc.); 
left_center.html per la gestione dello spazio che intercor- 
re tra la zona centrale dalla colonna sinistra; 
story_home.html per la gestione della visualizzazione 
delle notizie; 

stoiyjpage.html per la gestione della visualizzazione del- 
le notizie nel formato completo; 
tables.php contiene le funzioni per definire l'HTML relati- 
vo all'apertura e chiusura delle tabelle: la struttura più 
utilizzata da PHP-Nuke; 



Questa organizzazione rende il tema più semplice da gestire e 
modificare, a differenza del metodo che utilizza il solo file the- 
me.php, nel quale il codice HTML da modificare e personalizza- 
re andrà ricercato all'interno delle funzioni di cui si compone. 
Con un po' di pratica diventeremo abilissimi nel modificare i 
temi esistenti oppure crearne di nuovi; infatti, come spesso 
avviene in questo campo, le cose sono più difficili a dirsi che 
a farsi! 
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CONCLUSIONI 

Questo articolo concludiamo l'argomento PHP-Nuke, iniziato 
nel numero precedente. Abbiamo visto i vantaggi derivanti 
dall'utilizzo di un CMS come PHP-Nuke, come installarlo e do- 
ve intervenire per utilizzarne le funzionalità adatte ai nostri 
scopi; ora non vi resta altro da fare che iniziare a costruire il 
vostro portale. 

Antonio Pasqua 
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XML UN GUESTBOOK PER IL TUO SHO 



Un Guestbook 
XML per il tuo sito 

Il Guestbook è una delle funzionalità 

maggiormente diffuse nei siti web. In 

questo articolo scopriremo come 

implementarne uno, sfruttando la 

semplicità di ADO.NET nella 

gestione di informazioni relazionali 

con file XML. 



Sul CD 

\soft\codice\ 
codice_guestbook.zip 



I; 




jl libro degli ospiti (guestbook) è uno strumento 
molto utilizzato dai webmaster desiderosi di offri- 
re ai visitatori la possibilità di lasciare un "segno del 
proprio passaggio". Tra le varie risorse reperibili in 
i Internet ci sono guestbook di ogni tipo e potenzia- 
lità, ma la maggior parte di essi necessita di SQL Server (o 
Access) per memorizzare i dati relativi ai visitatori. Non 
tutte le soluzioni di hosting sono predisposte per l'utiliz- 
zo di database; per questo motivo vedremo come creare un 
guestbook rapido e "portabile", indipendente da una par- 
ticolare scelta di data-storing. La risposta alle nostre esi- 
genze è data dall'accoppiata ADO.NET e XML (Extensible 
Markup Language). Xml permette di memorizzare i dati re- 
lativi ai visitatori, con un approccio alternativo, totalmen- 
te text-based, evitando l'onere di connessioni ODBC a ser- 
ver con driver appropriati. Microsoft ha compreso fino in 
fondo l'importanza di xml nel futuro del web, infatti in 
.NET ci sono tutti gli strumenti necessari per la creazione 
di soluzioni basate su questo standard. Più nel dettaglio le 
classi adibite alla manipolazione di file xml sono racchiu- 
se in due principali namespace: System.Xml e System.Data. Ge- 
neralmente System.Xml è più versatile, ma richiede un lavo- 
ro maggiore da parte del programmatore anche per imple- 
mentare funzionalità piuttosto semplici. System.Data è meno 
flessibile per quel che riguarda Xml, ma favorisce la pro- 
grammazione, rendendo la stesura di codice più immedia- 
ta e semplice se le operazioni (come nel nostro caso) si li- 
mitano alla scrittura e lettura di file utilizzati come fonte 
dati. Utilizzeremo oggetti ADO.NET (disponibili in System.Da- 
ta) che forniscono una via efficiente e semplice per tratta- 
re le informazioni come se si stesse lavorando su dei veri 
e propri database relazionali. 
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L'organizzazione dell'applicazione Web è piuttosto sem- 
plice e non richiede una pianificazione particolarmente 
elaborata. Avremo bisogno di una pagina atta all'inseri- 
mento dei messaggi (aggiungi.aspx), un'altra pagina che vi- 
sualizzi i commenti già inseriti dai visisitatori 
(visualizza.aspx) e un file xml come back-end in cui memo- 
rizzare tutti i dati (guestbook.xml). Dal punto di vista del- 
l'interfaccia utente, aggiungi.aspx dovrà contenere un form 
con dei campi per l'inserimento da parte dell'utente, un 
pulsante di invio, e un collegamento alla pagina di visua- 
lizzazione del guestbook. Quando l'inserimento avverrà 
correttamente, la stessa pagina dovrà segnalare con un 
messaggio di ringraziamento l'avvenuta operazione. Die- 
tro le quinte la pagina dovrà creare il file xml, se non esi- 
ste, e aggiungere l'entry del messaggio appena inviato 
nel nostro "archivio". L'utente potrà inserire il proprio no- 
me (autore), il proprio e-mail (email), l'oggetto del com- 
mento (oggetto) e il commento vero e proprio (commento). 
Come vedremo tra breve, a questi campi si aggiungeran- 
no altri campi determinati in maniera automatica dalla 
pagina asp. Autore ed oggetto sono due campi che rendere- 
mo obbligatori, email sarà opzionale ma effettueremo un 
controllo sull'input per determinare se l'indirizzo è for- 
malmente corretto, e commento potrà essere inserito dall'u- 
tente oppure non inserito, in maniera totalmente arbitra- 
ria. Sfruttando le nuove caratteristiche di ASP.NET con- 
trollare l'input dell'utente e segnalare eventuali errori ri- 
sulta davvero immediato. Visualizza.aspx dovrà invece legge- 
re i commenti presenti nel file xml e mostrarli in maniera 
ordinata e opportuna, fornendo un link alla pagina di in- 
serimento dei commenti. Il file guestbook.xml verrà genera- 
to automaticamente dalla pagina aggiungi, mediante l'u- 
tilizzo di ADO.NET. La scelta di operare mediante il name- 
space System.Data ed i suoi oggetti mostra sin da subito i 
suoi grandi vantaggi: per la realizzazione di un applica- 
zione basata su xml, non bisogna necessariamente cono- 
scere tale linguaggio. 

Prima di passare all'analisi del codice di ogni pagina del- 
l'applicazione web, definiamo la struttura della tabella e 
le proprietà dei campi (o colonne) come se stessimo lavo- 
rando su di un comune database: 



Nome campo 


Tipo di dato 


id 


Int32 


crono 


DateTime 


autore 


String 


email 


String 


oggetto 


String 


commento 


String 



Come mostrato nella tabella, il campo "id" è un intero a 
32 bit. Id è necessario per identificare unicamente i sin- 
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goli commenti, per cui deve essere anche chiave primaria 
e contatore (si autoincrementa). "crono" è un campo che 
contiene la data e Torà del commento ed è di tipo Sy- 
stem.Datelime. "id" e "crono" sono le due colonne inserite 
automaticamente dalla pagina, mentre gli altri 4 campi di 
tipo stringa sono determinati direttamente dall'utente 
mediante la compilazione del form nella pagina 
aggiungi.aspx. Gli oggetti necessari alla creazione e manipo- 
lazione di questa struttura dati nel file xml sono DataSet, 
DataTable, DataRow, DataColumn e in fine, DataView per la visualiz- 
zazione. 



LA PAGINA AGGIUNGI.ASPX 

Utilizzando un editor qualsiasi (ad esempio Web Matrix), 
dovremo creare un'interfaccia utente simile a quella mo- 
strata in Fig. 1. 



lalizza Preferiti Strumenti ? 




Fig. 1 - La 
semplice 
interfaccia utente 
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Si presti attenzione nell'utilizzare esclusivamente caselle 
di testo di tipo Web Control (<asp:TextBox id="nomescelto" runat="ser- 
ver"x/asp:TextBox>) e non semplici elementi di input html. 
Gli id delle quattro textbox sono: txtAutore, txtEmail, txtOggetto, 
txtCommento, mentre l'id del pulsante è btnlnserisci. Si posizio- 
ni inoltre tutto il contenuto del form di invio su di un web 
control Panel denominato pnllnvio. Designata l'interfaccia 
passiamo all'analisi del codice necessario. 
Dovremo ottenere come prime righe del file aggiungLaspx, le 
seguenti: 

<%@ Page Language="VB" %> 

<%@ import Namespace="System.Data" %> 

<%@ import Namespace="System.lO" %> 

La prima istruzione permette di scegliere il linguaggio Vi- 
sual Basic (potete sostituirlo con C#, se preferite), men- 
tre le altre due righe effettuano l'import dei namespace 
System.Data e System.lO. Il namespace System.lO è necessario 
per i controlli sull'esistenza fisica del file xml sul server. 
Nella pagina si trovano tre "procedure": Page_Load, Inizializza- 
File e btnlnserisci_Click. La prima e l'ultima sono delle routine 



di gestione degli eventi, rispettivamente di caricamento 
della pagina e di click sul pulsante di invio. 
Il codice di Page_Load è il seguente: 

Sub Page Load(sender As Object, e As EventArgs) 

pnllnizio.Visible = True 

strPath = Server.M apPathC'guestb ook.xml") 



If Not Page.IsPostBack Then 



If Not File.Exists(strPath) Then 



InizializzaFileO 



Endlf 



Endlf 



End Sub 

Al caricamento della pagina il pannello contenente tut- 
ta l'interfaccia centrale per l'inserimento dei dati (la ta- 
bella con le textbox) deve essere resa visibile assegnan- 
do il valore True alla proprietà Visible del pnllnizio. Successi- 
vamente viene ricercato sul server, il file guestbook.xml. 
Se tale file non esiste, viene richiamata la procedura Ini- 
zializzaFile che si occupa della creazione fisica del file e di 
memorizzare la struttura di tabella nello schema XML. 
Diamo un'occhiata al codice della procedura Inizializza- 
File: 

Sub InizializzaFileO 

dsGuestbook = New DataSetQ 

Dim dtGuestbook As DataTable = 

dsGuestbook.Tables.AddC'messaggio") 

Le precedenti istruzioni creano un'istanza del dataset di 
nome dsGuestbook e instanziano un datatable dtGuestbook, ag- 
giungendo quindi una tabella di nome "messaggio" al da- 
taset. Creata la tabella nel dataset, ci occorre definire le 
6 colonne (i campi visti in precedenza) che le apparten- 
gono. Allo scopo utilizziamo il metodo Add di dtGuestbook.Co- 
lumns: 

Dim dcGuestbook as DataColumn = dtGuestbook.Columns.AddC'id", 

Type.GetType("System.lnt32")) 

dtGuestbook.Columns.Add("crono" > Typ e.GetType("Syst em.DateTime")) 

dtGuestbook.Columns.Add("autore" > Type.GetType("System.String")) 

dtGuestbook.Columns.Add("email",Type.GetType("System.String")) 

dtGuestbook.Columns.Add("oggetto",Type.GetType("System.String")) 

dtGuestbook.Columns.Add("commento"Jype.GetType("System.String")) 

Inzialmente viene istanziato il datacolumn dcGuestbook e 
inserita la colonna id di tipo int32 all'interno del datatable 
dtGuestbook. Successivamente viene ripetuto l'inserimento 
di tutte le colonne. Si potrebbe pensare che la creazione 
dell'istanza dcGuestbook sia superflua, visto che l'inseri- 
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mento delle altre colonne all'interno del datatable è av- 
venuto senza l'ausilio di alcuna istanza di DataColumn, 
semplicemente mediante il metodo Add. In realtà dcGuest- 
book è necessario perché su di esso dobbiamo effettuare 
delle operazioni per rendere la colonna id nella tabella, di 
tipo contatore e chiave primaria. Seguono le istruzioni 
necessarie per definire l'autoincremento: 

dcGuestbook.Autolncrement = true 

dcGuestbook.AutolncrementSeed = 1 

dcGuestbook.AutolncrementStep = 1 

Il DataColumn dcGuestbook (corrispondente alla colonna id 
del datatable) viene reso auto-incrementabile (Autolncre- 
ment), a partire da 1 (AutolncrementSeed) con un incremento 
di 1 (AutolncrementStep) per ogni commento aggiunto. 
Il codice necessario alla creazione di una chiave primaria 
è meno immediato ma non particolarmente complesso. 
La proprietà PrimaryKey dell'oggetto DataTable non richiede 
un DataColumn, bensì un array di DataColumn. 
L'apparente complicazione è motivata dall'esigenza, tal- 
volta, di creare delle chiavi composte basate su più co- 
lonne. Dobbiamo quindi instanziare un array di DataColumn 
costituito da 1 solo elemento, al quale assegnare il no- 
stro dcGuestbook. 

A questo punto l'array conterrà solamente il DataColumn che 
si riferisce alla colonna id e non dovremo far altro che as- 
segnare alla proprietà PrimaryKey tale array: 

DimarrPK(1)As DataColumn 

arrPK(O) = dcGuestbook 
dtGuestbook.PrimaryKey = arrPK 

Abbiamo definito la struttura del dataset in maniera tale 
da contenere le informazioni che ci servono. Il passo suc- 
cessivo consiste nell'inserire tale struttura in un file xml. 
Uno Schema è un insieme ben definito di regole che defi- 
niscono gli elementi e gli attributi di un file xml, al fine 
di definire con esatezza la validità e la consistenza dei 
dati. Lo schema può essere scritto in un file .xsd richia- 
mato nel file xml, oppure essere parte interna dello stes- 
so file xml e in tal caso è detto inline. Sfruttando il me- 
todo WriteXml dell'oggetto DataSet potremo sfruttare que- 
st'ultimo approccio per "trasferire" il dataset, la sua strut- 
tura e i suoi vincoli (constrains) nel file xml: 

dsGuestbook.WriteXmKstrPath, XMLWriteMode.WriteSchema) 
End Sub 

Inizialmente, quando il file guestbook.xml è stato appena 
creato, appare in questo modo: 

<?xml version="1.0" standalone="yes"?> 

<NewDataSet> 
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<xs:schema id="NewDataSet" xmlns="" xmlns:xs= 

"http://www.w3.org/2001/XMLSchema" xmlns:msdata = 

"urn:schemas-microsoft-com:xml-msdata"> 

<xs:element name="NewDataSet" msdata:lsDataSet= 

"true" msdata:Locale="it-IT"> 

<xs:complexType> 

<xs:choice maxOccurs="unbounded"> 



<xs:element name="messaggio"> 



<xs:complexType> 



<xs:sequence> 



<xs:element name="id" msdata:Autolncrement="true" 
msdata:AutolncrementSeed="1" type="xs:int" /> 

<xs:element name="crono" type="xs:dateTime" 
minOccurs="0" /> 

<xs:element name="autore" type="xs:string" 
minOccurs="0" /> 

<xs:element name="email" type="xs:string" 
minOccurs="0" /> 

<xs:element name="oggetto" type="xs:string" 
minOccurs="0" /> 

<xs:element name="commento" type="xs:string" 

minOccurs="0" /> 



</xs:sequence> 



</xs:complexType> 



</xs:element> 



</xs:choice> 



</xs:complexType> 



<xs:unique name="Constraint1" msdata:PrimaryKey="true"> 

<xs:selector xpath=" .//messag gio" /> 

<xs:field xpath="id" /> 



</xs:unique> 
</xs:element> 



</xs:schema> 



</NewDataSet> 

Salvo alcuni punti più complessi a prima vista, anche chi 
non conosce affatto xml, si renderà conto di come tale co- 
dice rispecchi perfettamente la struttura della tabella da 
noi definita. La terza routine della pagina è btnlnserisci_ 
Click, che gestisce l'evento di click sul pulante di invio com- 
mento: 

Sub btnlnserisci Click(sender As Object, e As EventArgs) 

_Jey 



dsGuestbook = New DataSetO 



dsGuestbook.ReadXmKstrPath, XmlReadMode.ReadSchema) 

Inizialmente la procedura legge le informazioni contenu- 
te nel file xml, il suo schema, e lo memorizza in un'istan- 
za di DataSet mediante il metodo ReadXml. Successivamente 
viene istanziato un DataRow drGuestbook per l'inserimento di 
una nuova entry nel DataSet. 

Vengono effettuati degli assegnamenti per ogni colonna 
salvo per il campo id che viene "auto-generato". 
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I valori inseriti dall'utente nelle textbox sono assegnati ai 
rispettivi campi, mentre per la colonna "crono", ci si affi- 
da all'orario generato dal sistema mediante l'istruzione 
Datelìme.Now(): 

Dim drGuestbook As DataRow=dsGuestbook.Tables(Q).NewRow() 
drGuestbookfcrono") = DateTime.NowO 



drGuestbo ok("autore") = txtAutore.Text.toStringQ 

drGuestbookC'email") = txtEmail.Text.toStringQ 
drGuestbookC'oggetto") = txtOggetto.Text.toStringQ 



drGuestbookC'commento") = txtCommento.Text.toStringO 
dsGuestbook.TablestO).Rows.Add(drGuestbook) 

Inserito nel dataset il nuovo commento, richiamiamo il 
solito metodo per la scrittura del file xml secondo i crite- 
ri di validità stabiliti nello schema: 

dsGuestbook.WriteXml(strPath,XMLWriteMode.WriteSchema) 

La parte finale della procedura si occupa della visualizza- 
zione di un messaggio di ringraziamento al posto della 
scritta "Firma il Guestbook" e di rendere invisibile il pan- 
nello pnllnizio contenete il form di inserimento. Tutto il 
codice della procedura è posto in un blocco Try-Catch al 
fine di intercettare e segnalare, con la solita label di con- 
ferma, anche eventuali errori. 

Ibllnizio.text = "Grazie " & txtAutore.Text.toStringQ & "!" 



pnllnizio.Vi sible = False 



Catch err As System.Exception 



Ibllni zio.text = err.mes sage 



End Try 



End Sub 

L'ultima operazione da compiere è quella di controllare 
l'input inserito dall'utente mediante dei RequiredFieldValidator 
e RegularExpressionValidator che segnalano con un carattere di 
asterisco (*) gli input non validi. Le textbox txtAutore e tx- 
tOggetto sono dei campi richiesti, per cui dovremo inserire 
due controlli nel codice: 

<asp:RequiredFieldValidator id="RequiredFieldValidator1 " 

runat= "server" display="static" ControlToValidate= 
"txtAutore">*</asp:RequiredFieldValidator> 

<asp:RequiredFieldValidatorid="RequiredFieldValidator2" 

runat= "server" display="static" ControlToValidate= 
"txtOggetto">*</asp:RequiredFieldValidator> 

Per quanto riguarda la txtEmail, dovremo controllare sola- 
mente che l'indirizzo inserito non sia formalmente erra- 
to, per cui facciamo seguire al codice della txtEmail, il se- 
guente: 



<asp:RegularExpressionValidator id= 

"RegularExpressionValidatoM " runat="server" 

ControlToValidate="txtEmail"Display="Static" 
ValidationExpression="[\w-]+@([\w-]+\.)+[\w-]+">* 

</asp:RegularExpressionValidator> 

Il criptico valore della ValidationExpression si limita a control- 
lare la presenza di un carattere di "@" e di un punto, in 
maniera ordinata ma non adiacente, all'interno della 
stringa inserita. 

La mancanza di un RequiredFieldValidator indica la volontà di 
permettere all'utente di non inserire la propria e-mail, 
mentre il controllo appena esposto delimita inserimenti 
scorretti involontari. Esistono controlli più restrittivi sul- 
l'input di un campo e-mail, ma tali nozioni esulano dagli 
scopi dell'articolo. 



Autore 


Marina Flamini 










E-Mail 


rnarina@yahoo 


. 








Oggetto 




* 








Commento 


Prova di commento ! 


— 
















| inserisci! j] 















La pagina aggiungi.aspx è così completata e funzionante. Ad 
ogni commento inserito correttamente, il file xml si arric- 
chisce di un "record" che sarà simile nel formato, al se- 
guente esempio: 

<messaggio> 

<id>25</id> 

<crono>2002-1 1 -27T20:30:1 3.9364304+01 :00</crono> 

<autore>Marina Flamini</autore> 



<email>suaemail@prova.it</email> 



<oggetto>Prova di commento</oggetto> 

<commento>Continuate così! Dio vi benedica!</commento> 
</messaggio> 



LA PAGINA VISUALIZZA.ASPX 

Completata la parte inerente all'inserimento dei commen- 
ti, non resta che realizzare la pagina di visualizzazione. Il 
codice necessario è relativamente semplice se ci si avvale 
del controllo web Repeater e dell'oggetto DataView. Inserito il 
Repeater all'interno della pagina web, e gli import iniziali, 
la parte di codice necessaria si riduce alle poche righe se- 
guenti: 
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completamento 
dei campi da parte 
dell'utente, i 
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segnalano 
l'errore con un 
carattere 
asterisco rosso 
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Sub Page Load(sender As Object, e As EventArgs) 
strPath = Server.MapPath("guestbook.xml") 
If Not Page.IsPostBack Then 
If File.Exists(strPath) Then 

Visualizzai) 



Endlf 



Endlf 



End Sub 



Sub VisualizzaO 



dsGuestbook = New DataSetO 



dsGuestbook.ReadXmltstrPath, XmlReadMode.ReadSchema) 
Dim dvGuestbook As DataView = 

dsGuestbook.Tables(Q).DefaultView 

dvGuestbook.Sort = "id DESC" 



<i> <font size= "1"><%# DataBinder.EvaK 
Container.Dataltem, "crono") %> < 

<%# DataBinder.EvaKContainer.Dataltem, "email") %>> 
</fontx/i> 

<br/> 

<br/> 



</td> 



</tr> 



</ltemTemplate> 

Tralasciando le possibili personalizzazioni del codice 
HTML, si ponga l'accento sulle istruzioni di associazione 
tra le informazioni presenti nei campi delle tabella del da- 
taset e la pagina generata. 
L'istruzione generica: 



La procedura Visualizza, invocata al caricamento della pagi- 
na si occupa dell'associazione del DataSet al Repeater. Le pri- 
me due istruzioni di tale routine memorizzano nell'istan- 
za dsGuestbook, il DataSet contenuto nel file guestbook.xml. Suc- 
cessivamente viene istanziato un oggetto DataView (dvGuest- 
book) mediante l'associazione con la tabella "messaggio" 
(di indice 0) del DataSet. L'assegnamento dvGuestbook.Sort = 
"id DESC" permette di visualizzare i messaggi a partire dal- 
l'ultimo inserito, secondo l'ordine cronologico (decre- 
scente rispetto a id). 

Alla proprietà DataSource del repeater (denominato rptGue- 
stbook) viene assegnato il DataView dvGuestbook ed infine invo- 
cando il metodo DataBind del repeater avviene l'associazio- 
ne dei dati: 

rptGuestbook.DataSource = dvGuestbook 

rptGuestbook.DataBindQ 

End Sub 

Il codice html, misto a codice ASP.NET, per la visualizza- 
zione dei dati è il seguente: 

<asp:Repeater id="rptGuestbook" runat="server"> 

<ltemTemplate> 



<tr> 



<tdwidth="100%"> 



<u><bx%#DataBinder.Eval(Container.Dataltem, 

"oggetto") %></bx/u> di <i> 

<%# DataBinder.EvaKContainer.Dataltem, "autore") %></i> 
</td> 



</tr> 



<tr> 



<tdwidth="100%"> 



<%# D ataBinder.EvaKContainer.Datalte m, "commento") %> 
<br/> 
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Fig. 3 - La pagina 
visualizza.aspx in 
presenza di alcuni 

commenti fittizzi 



<%# DataBinder.EvaKContainer.Dataltem, "nomecampo") %> 

inserisce il valore di nomecampo all'interno del codice 
html. Grazie all'oggetto Repeater, tutti i commenti presenti 
nel file xml, saranno visualizzati in maniera simile a quel- 
la mostrata in Fig. 3. 
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CONCLUSIONI 

ADO.NET fornisce un ottimo supporto per l'uso di Xml co- 
me soluzione di data-storing veloce e diretta. La sempli- 
cità con la quale .NET permette di interagire con Xml, apre 
nuove prospettive per l'impiego alternativo, in quelle ap- 
plicazioni in cui la mole di dati non è tale da richiedere 
database del calibro di Microsoft Sql Server. 
Il guestbook presentato è volutamente semplice e perso- 
nalizzabile, ma è davvero interessante notare come grazie 
a dotnet, un'applicazione web basata su XML non richie- 
da la scrittura di una sola riga di codice in questo lin- 
guaggio. 

Antonio Cangiano 
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Realizzare una chat con i più avanzati 

strumenti disponibili. 



Sul CD 

\soft\codice 
\java_flash.zip 



S 



e avete già sviluppato applicazioni per internet, e vi- 
sto che leggete questa rivista probabilmente sì, co- 
noscerete sicuramente almeno un linguaggio di 
I script lato server. Saprete quindi quali enormi van- 
taggi essi portino nella realizzazione di siti internet, 
consentendo di poter modificare dinamicamente i contenuti 
delle pagine al cambiare delle richieste effettuate. La realiz- 
zazione di una qualsiasi applicazione internet sarebbe di fat- 
to impossibile senza il loro impiego. Ma, come spesso accade 
nell'informatica, ad evidenti vantaggi di una tecnologia, cor- 
rispondono carenze spesso legate proprio alle stesse caratteri- 
stiche positive. Nel caso dei linguaggi server side, il più gran- 
de scoglio che si incontra è l'impossibilità di effettuare opera- 
zioni che riguardino il lato client dell'applicazione, con la 
conseguenza di dover sempre riportare i dati sul server per po- 
ter effettuare anche la più semplice operazione di controllo. 
Per questo occorre spesso utilizzare uno strumento aggiunti- 
vo, lato client, che permetta di rendere lo scambio di dati me- 
no ridondante e che velocizzi quindi l'applicazione che si sta 
realizzando. In tutti e due i casi, lato client e lato server, la 
scelta dei prodotti per lo sviluppo è sufficientemente vasta da 
permettere a chiunque di trovare la soluzione ideale rispetto 
alle proprie conoscenze. In questo articolo tratteremo due 
delle possibili risoluzioni per lo sviluppo di contenuti web in- 
terattivi, riprendendo di fatto il discorso sulla programmazio- 
ne in java server side, ed introducendo anche lo studio di in- 
terfacce utente realizzate in Flash. 



IL PROGETTO 

L'esempio che realizzeremo questo mese, pur essendo di sem- 
plice realizzazione, dimostra in maniera evidente l'efficienza 
dell'utilizzo di due linguaggi differenti per la nostra applica- 
zione client/server. Prendendo infatti Java per la parte server 
del nostro software, abbiamo la possibilità di usufruire di un 
linguaggio potente ed immediato come JSP che facilita di 
molto la creazione di ciò che andremo a realizzare, mentre, la- 
to client, l'adozione di uno strumento come Flash, rende la 
nostra applicazione ricca di possibilità importanti per un am- 
biente client, come ad esempio, nel nostro caso, la possibilità 
di caricare dei dati senza dover rieffettuare il refresh della pa- 
gina. Ciò che andremo a realizzare in questo articolo, una 
chat, probabilmente sarà già stata vista da molti di voi come 
esempio in altre pubblicazioni per imparare ad utilizzare il 
proprio linguaggio di script server side, ma, ciò che probabil- 



mente non è stato ancora visto, è come una applicazione di 
questo tipo, tra l'altro perfettamente funzionante anche solo 
lato server, possa trarre beneficio dall'utilizzo di tecnologie 
differenti per ciascuno dei due lati della nostra applicazione. 
Flash infatti mette a disposizione lato client due importanti 
possibilità: 

• Refresh automatico - Essendo il filmato flash eseguito da 
un plug-in interno al browser, esso è in effetti svincolato 
dalla pagina html statica, e rimane in esecuzione anche 
dopo che la pagina stessa è stata completamente carica- 
ta. Questo ci permette di avere un ambiente di sviluppo 
che, oltre ad intercettare eventuali azioni dell'utente, può 
compiere esso stesso delle operazioni determinate dallo 
scorrere del tempo, come ad esempio effettuare il refresh 
di una chat per visualizzarne i contenuti aggiornati. 

• Caricamento trasparente - Flash possiede una particolare 
caratteristica che gli permette di caricare dei dati da file 
di testo in maniera completamente invisibile all'utente. 
Questo significa che, al verificarsi di determinate condi- 
zioni, è possibile tramite Flash aggiornare il contenuto di 
alcune variabili interne per aggiornare il filmato senza 
che quest'ultimo debba essere ricaricato. Il risultato è, nel 
nostro caso, una chat contenuta in una pagina che non 
viene mai aggiornata, risultando di fatto in un'interfaccia 
molto veloce e graficamente migliore. 

Con queste potenti caratteristiche, la nostra chat si arricchirà 
di contenuti sicuramente nuovi rispetto agli esempi che pote- 
te aver già incontrato, e vi porterà a scoprire i vantaggi dello 
scegliere le tecnologie adatte al tipo di applicativo che si in- 
tende realizzare. 
Ma cominciamo finalmente a digitare codice. 

SERVER JSP 

Come premesso, il server della nostra applicazione verrà rea- 
lizzato utilizzando forse il più semplice strumento per la rea- 
lizzazione di contenuti Java per internet: JSP. Nel numero 
scorso abbiamo dato un'introduzione al linguaggio, notando 
che la sintassi non è dissimile dal Java che noi tutti siamo abi- 
tuati ad utilizzare e che, in fondo, esso non è che uno strato 
che nasconde una tecnologia Java pura al 100% che prende il 
nome di Servlet. Non essendo questo un corso che porta all'ap- 
prendimento di un particolare linguaggio, quanto piuttosto 
una fase di introduzione e sperimentazione dei linguaggi co- 
nosciuti, non ci soffermeremo molto sulla sintassi del codice 
di esempio, ponendo invece l'attenzione sul risultato del no- 
stro lavoro e sulle sue caratteristiche. Iniziamo comunque 
creando un file con estensione JSP nella directory di root del 
nostro server web e digitandovi il codice presente sul CD alle- 
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gato nel file: Mia Chatjsp. Andiamo ad esaminare brevemente il 
listato sopra riportato analizzando il risultato restituito in 
output. La prima istruzione, nel primo blocco, crea un'array 
di stringhe che utilizzeremo come buffer per la lista di mes- 
saggi che verranno via via immessi. La funzione che segue, 
molto particolare in JSP, viene richiamata ogni prima volta 
che una servlet viene avviata, e serve di fatto ad inizializzare 
l'array appena creato immettendovi delle stringhe vuote. Una 
volta realizzata la struttura dati necessaria alla nostra appli- 
cazione, il passo successivo consiste nell'elaborare le richie- 
ste di dati che verranno di volta in volta effettuate, ed il se- 
condo blocco di codice esegue queste poche, semplici opera- 
zioni. Innanzitutto controlla se insieme alla richiesta di vi- 
sualizzazione della pagina sono state inviate anche le varia- 
bili che corrispondono alla persona ( nick ) ed al messaggio ( 
messaggio ) di un'eventuale nuovo messaggio da aggiunge- 
re alla lista. Se ciò è stato fatto, allora aggiunge il nuovo mes- 
saggio alla lista formattandolo in una stringa in formato html 
per poi proseguire oltre. Le istruzioni successive si occupano 
dell'output dei dati contenuti nel nostro buffer, ed altro non 
sono che delle istruzioni di stampa delle stringhe già prece- 
dentemente formattate in html. Ma prima di ciò, affinché il 
risultato della stampa possa essere analizzato dal filmato Fla- 
sh, il tutto va assegnato ad una variabile chiamata messaggi che 
utilizzeremo per recuperare i dati ricevuti all'interno del fil- 
mato client. Il testo deve essere infatti formattato, per poter 
essere caricato correttamente dal filmato Flash, secondo le 
specifiche del formato application/x-www-form-urlencoded che, a di- 
spetto della sigla piuttosto poco amichevole, altri non è che 
lo standard per il passaggio di parametri in internet tramite 
le stringhe di interrogazione visibili nella barra di indirizzi 
del browser (il metodo GET dell'Http). In breve, è sufficiente 
indicare il nome della variabile della quale si intende defini- 
re il valore preceduta da una e commerciale (&), seguita da 
un segno di uguale ( = ) e dal valore che si intende dare alla 
variabile stessa, ad esempio, la stringa seguente carica due 
variabili di nome regione e stato, ed imposta per ciascuna i 
valori "lazio" ed 'Italia": 

&regione=lazio&stato=italia 

Questo tipo di stringa può essere tranquillamente utilizzata 
per passare, ad un filmato Flash che le richieda, le due varia- 
bili regione e stato. Ma testiamo il nostro file JSP. Già, perché il 
semplice listato appena scritto è effettivamente un motore 
per chat perfettamente funzionante del quale possiamo veri- 
ficare l'effettiva bontà semplicemente collegandosi al proprio 
server web e digitando l'indirizzo del file JSP creato. Ma ad 
un primo caricamento della pagina in questione non appare 
null'altro che la stringa &messaggi=. Questo dipende dal fatto 
che il buffer utilizzato per contenere i messaggi inviati alla 
chat, essendo la prima volta che essa viene caricata, è com- 




Fig. 1 -Aggiunta 
di un nuovo 
messaggio. 



pletamente vuoto, e quindi è impossibile visualizzare alcun- 
ché. Per fare in modo che l'array di stringhe che contiene i 
messaggi della chat si riempia con i primi dati, occorre fare in 
modo che la pagina li riceva e li aggiunga quindi alla lista. Per 
ottenere questo risultato, si devono passare le due variabili 
necessarie alla composizione del messaggio (nick e messaggio) 
attraverso la stringa di interrogazione, così da fare in modo 
da renderle disponibili alla pagina JSP. Si provi ad inserire al 
termine dell'indirizzo del proprio file JSP la seguente stringa: 

?nick=Giuliano&messaggio=messaggio+di+prova 

Ora l'indirizzo della pagina dovrebbe somigliare a questo: 

http://localhost:8080/NomeCartella/NomeFile.jsp?nick= 

giuliano&messaggio=messaggio+di+prova 
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Una volta lanciato di nuovo il browser al caricamento della 
pagina in questione, potete finalmente osservare che la no- 
stra chat si arricchisce del primo messaggio lasciato dall'u- 
tente Giuliano contenente la stringa "messaggio di prova". Ovvia- 
mente potete modificare tranquillamente il valore delle varia- 
bili per vedere come ogni volta viene inserito un messaggio 
differente, mantenendo comunque in memoria i messaggi 
precedenti. Potete inoltre avviare il vostro browser in una 
nuova finestra che punti alla stessa pagina JSP, e simulare 
due utenti che chattano effettivamente tra di loro, osservan- 
do che, all'immissione di un nuovo messaggio da parte di uno 
dei due, l'altro riesce a vederlo semplicemente aggiornando la 
pagina, come in Fig.l. Un'ultima osservazione importante 
consiste nel visualizzare il vero contenuto che il file JSP rila- 
scia al browser osservando il codice html della pagina. Per far- 
lo, se utilizzate Internet Explorer cliccate sul menù Visualizza e 
scegliete la voce Html. Come potete osservare, il file, visto in 
questo modo, appare molto differente dalla visualizzazione 
nel browser per la presenza dei numerosi tag Html che indi- 
cano come formattare le informazioni contenutevi. Sebbene 
fosse possibile eliminare questi tag, utili esclusivamente per 
la visualizzazione in un browser web, ho scelto di mantenerli 
per illustrarvi, successivamente, una importante caratteristi- 
ca di Flash rinnovata nella sua versione MX, e cioè la capacità 
non solo di caricare variabili di testo da un file qualsiasi, ma 
anche la possibilità di interpretarne eventuali formattazioni 
Html. Bene, detto ciò, e testato il corretto funzionamento del 
nostro motore di chat, occorre passare alla fase più artistica 
del progetto, che consiste nel dotare di un'interfaccia grafica 
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l'applicazione da noi sviluppata. Per questo si rende necessa- 
rio abbandonare JSP per tuffarci nella programmazione di un 
client in Flash. Avviate quindi il programma e proseguiamo. 

CLIENT FLASH 

Il lato Flash della nostra applicazione, per chi conosce il pro- 
dotto, è veramente banale da realizzare. E' infatti sufficiente 
realizzare graficamente una form che renda possibile l'immis- 
sione di nuovi messaggi e la visualizzazione di quelli conte- 
nuti nel buffer del server, oltre, successivamente, ad indicare 
quando caricare i messaggi aggiornati ed il file da cui prele- 
vare i messaggi stessi. Ma, siccome credo che la spiegazione 
delle azioni che il client deve effettuare sia più difficile del- 
l'effettiva realizzazione delle stesse, passiamo senza indugia- 
re oltre alla creazione dell' altro lato della nostra applicazio- 
ne. Il primo passo consiste nel realizzare, come detto prece- 
dentemente, una form per contenere i dati che ci sarà utile vi- 
sualizzare. A questo scopo si devono inserire, sullo stage del 
filmato, diverse aree di testo, mantenendo un'impostazione 
simile a quella della Figura 2. Come è possibile osservare dal- 
l'immagine, vi sono 3 campi di testo di differente grandezza 
tutti piazzati all'interno dello stage. I nomi di ognuno dei 
campi di testo, da inserire nel pannello Proprietà dove appare la 
stringa <lnstance Name>, sono rispettivamente: 



area M cssa gg i 



areaNick 



areaTesto 



• areaMessaggi - La casella di testo più grande, che con- 
terrà tutta la lista di messaggi immessi dai vari utenti del- 
la chat e che deve essere in grado di interpretare testo 
formattato in Html. 

• areaTesto - La casella di testo in basso a sinistra che de- 
ve contenere il testo del nuovo messaggio da inviare alla 
chat. 

• areaNick - La casella più piccola in basso a destra che de- 
ve invece contenere il nome dell'utente che sta mandan- 
do il messaggio. 

Oltre ai campi di testo, è presente anche un pulsante che per- 
mette di inviare un nuovo messaggio composto. Una volta 
realizzata questa semplice struttura è conveniente farne una 
MovieClip che possa rispondere a dei particolari eventi che ci 
è utile intercettare, ed a tale scopo, selezionate tutto il con- 
tenuto dello stage e premete il tasto F8. Una volta completato 



Fig. 2 - Imposta- 
zioni dello Stage 



questo passo, selezionate la MovieClip appena realizzata ed 
assegnatele il nome "chat" dal pannello Proprietà. Bene, fatto ciò 
il contenuto grafico della nostra chat è completato, quello 
che ci rimane da fare ora è implementare da codice delle 
istruzioni che ci permettano di collegare il nostro client con 
il server realizzando nel contempo un sistema di refresh auto- 
matico. La prima parte di codice va inserita nella MovieClip 
"chat", che sarebbe poi quella che contiene tutti i campi di te- 
sto utili alla nostra applicazione. Per procedere all'immissio- 
ne è necessario selezionare la Movie cliccandoci sopra e suc- 
cessivamente aprire il pannello Azioni impostando la modalità 
Esperto. Una volta compiuti questi passi occorre digitare il se- 
guente codice: 

onClipEvent (load) { 

attesa=20; 
trascorsoci 



areaTesto.text="testo"; 



areaNick.text="nick"; 



areaM essaggi.text="lniziali zzazione in corso.. 
this.loadVariablesC'MiaChatjsp");} 
onClip Event (data) { 



areaMessaggi.html=true; 



areaM essaggi.htmITe xt = messaggi; } 



onClipEve nt (enterFrame) { 



if((trascorso++)==attesa){ 



trascorsoci 



this.loadVariablesC'MiaChatjsp"); } } 

Il listato riportato si occupa di dichiarare tre funzioni che 
svolgono dei compiti molto particolari in Flash. La prima vie- 
ne richiamata quando il filmato viene caricato per la prima 
volta, ed in questo caso viene utilizzata per dichiarare ed ini- 
zializzare alcune variabili, per riempire i campi di testo con 
dei valori di default nonché caricare il contenuto del buffer 
della chat in memoria. La seconda funzione invece viene uti- 
lizzata da Flash ogni qual volta dei nuovi dati vengono cari- 
cati in memoria, e nel nostro caso serve ad immettere il con- 
tenuto restituito dal file JSP nel campo di testo di nome area- 
Messaggi, specificando, nel contempo, che il testo dichiarato 
deve essere analizzato in formato Html. La variabile messag- 
gi utilizzata nella seconda istruzione di questa funzione, altri 
non è che quella dichiarata dal file JSP alla quale abbiamo as- 
segnato il contenuto di tutti i messaggi del buffer della chat. 
La terza ed ultima funzione viene richiamata ogni volta che la 
MovieClip entra in uno dei suoi trame. Questo significa che se 
essa è in loop, e lo è per default , ogni tot di tempo essa cam- 
bierà trame e questa funzione verrà richiamata, dandoci così 
l'opportunità di inserire al suo interno tutti quei comporta- 
menti che debbono essere eseguiti in maniera ciclica. In que- 
sta funzione inseriamo infatti il refresh della pagina sempli- 
cemente immettendo un controllo sul tempo di attesa tra un 
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CODICE 



Il codice mostratOp dichiara una fun- 
zione che viene richiamata ogni volta 
che il pulsante viene premuto. Essa 
copia il contenuto dei due campi di 
testo dove si è immesso il nick ed il 
messaggio in due varabili della 
MovieClip, che vengono poi inviate 
dal metodo IoadVariables, utilizzato 
stavolta non solo per il caricamento 
della variabile messaggi 



refresh e l'altro (con le variabili trascorso ed attesa), e l'istruzio- 
ne per il caricamento della nuova variabile messaggi con il con- 
tenuto della chat aggiornato. Quando i dati saranno stati ca- 
ricati, la funzione onClipEvent(data) si preoccuperà di aggiornare 
la casella di testo che visualizzerà gli ultimi dati acquisiti. Il 
passaggio successivo consiste nell'immettere dell'altro codi- 
ce, associato al pulsante invia, che permetta di trasmettere dei 
nuovi messaggi alla pagina JSP, in modo che essa possa ag- 
giungerli alla lista. Occorre ricordare infatti che, caricando la 
pagina del server JSP senza inviare alcuna variabile, cioè co- 
me abbiamo fatto sin ora, il codice java altro non fa che rila- 
sciare il contenuto dell'array di stringhe 
in memoria, senza modificarlo. Per ag- 
giungere messaggi si devono invece for- 
nire alla pagina due valori, nick e messag- 
gio, che essa possa utilizzare per format- 
tare un nuovo messaggio. Andiamo 
quindi ad inserire il codice necessario. 
Fate doppio click sulla MovieClip chat in 
modo da posizionarvi al suo interno, do- 
po di che selezionate il pulsante invia 
cliccandovi sopra. Aprite quindi di nuo- 
vo il pannello Azioni per andare a scrivere 
il listato seguente: 



on (press) { 



this.nick = areaNick.text; 



this.messaggio = areaTesto.text; 




loadVariables("MiaChat.jsp",this; , GET");} 

Il codice mostrato, dichiara una funzione che viene richia- 
mata ogni volta che il pulsante viene premuto. Essa copia il 
contenuto dei due campi di testo dove si è immesso il nick ed 
il messaggio in due varabili della MovieClip, che vengono poi 
inviate dal metodo IoadVariables, utilizzato stavolta non solo per 
il caricamento della variabile messaggi. Le due variabili quin- 
di, rese note alla pagina JSP, entrano a far parte della lista dei 
messaggi e possono essere correttamente visualizzate. Sfrut- 
tando poi la capacità di caricamento automatico dei dati vi- 
sta in precedenza, il client va ad aggiornare, dopo un lasso di 
tempo predefinito, la casella che deve contenere i messaggi, 



visualizzando il nuovo messaggio spedito in maniera del tut- 
to invisibile all'utente. Bene, ora che il nostro programma è 
terminato non ci resta che testare il suo corretto funziona- 
mento. A questo scopo, salvate il file creato con Flash nella 
stessa cartella del file JSP e pubblicate il filmato che utilizze- 
remo poi come client. Nella pubblicazione è importante pre- 
vedere anche la generazione di un file Html che funzioni da 
contenitore per il filmato, ad evitare che quest'ultimo venga 
eseguito nel player Macromedia. Una volta in possesso del fi- 
le .html tutto ciò che occorre fare è caricarlo nel browser e ini- 
ziare ad utilizzarlo. Ovviamente il caricamento non potrà av- 
venire in maniera diretta (con un doppio click sul file in que- 
stione) poiché in quel caso esso verrebbe trattato come un fi- 
le presente sul sistema, mentre a noi interessa che il nostro 
server web a processi il file JSP che deve fornirci i dati relati- 
vi ai messaggi. Per questo motivo occorre caricare il file digi- 
tando nella barra degli indirizzi del browser una stringa simi- 
le alla seguente: 

http://localhost:8080/NomeCartella/NomeFile.html 

Questo indirizzo ci connette alla pagina del client Flash di ela- 
borando il file JSP realizzato. Altra operazione importante da 
compiere è evitare che la pagina venga memorizzata nella ca- 
che del browser. Questo risulterebbe in un errore di difficile 
individuazione che non ci permetterebbe di sincronizzare i 
messaggi inviati con la loro corretta visualizzazione. Per evi- 
tare ciò, impostate nel vostro browser il nuovo caricamento 
della pagina ogni qual volta essa deve essere visualizzata, in 
Internet Explorer ad esempio, dal menù Strumenti->Opzioni Inter- 
net selezionate la scheda Generale e premete il tasto Elimina File ri- 
spondendo Ok alla dialog che vi verrà proposta. Successiva- 
mente premete il pulsante Impostazioni e selezionate nel gruppo 
"Ricerca versioni più recenti delle pagine memorizzate" l'opzione "All'apertu- 
ra della pagina", premendo successivamente il tasto Ok. Compiuta 
quest'ultima operazione, potete verificare finalmente che la 
chat realizzata assolve gli scopi che ci eravamo prefissati, an- 
dando a svolgere esattamente il compito che le avevamo as- 
segnato. 

CONCLUSIONI 

In questo articolo abbiamo potuto osservare che utilizzando 
due strumenti diversi per il lato client e server di una appli- 
cazione web, si possono sfruttare le caratteristiche particola- 
ri di più prodotti per soddisfare le proprie esigenze nel mi- 
gliore dei modi. Questo porta, nella maggioranza dei casi, ad 
una maggiore efficienza del prodotto ed ad un minore tempo 
di sviluppo. La morale è quindi: non cercate di sviluppare ap- 
plicazioni nell'unico modo in cui siete capaci, piuttosto ana- 
lizzate tutti gli strumenti possibili, scegliete quello più adat- 
to al vostro problema e non abbiate paura mai di cimentarvi 
nell'apprendimento di qualcosa di nuovo. Alla prossima. 

Giuliano Uboldi 
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Creiamo la 

sezione protetta 

del nostro sito 

Quante volte, sfogliando pagine 

internet, vi è capitato di trovarne 

alcune che, per essere visualizzate, 

richiedevano autenticazione con 

nome utente e password? 



Sul CD 

\soft\codice\ 
sezioneprotetta_source.zip 



Li 



a protezione di pagine web dall'accesso incondizio- 
nato degli utenti è ormai divenuta caratteristica co- 
mune a molti siti internet, a partire dal sito amato- 
riale fino ad arrivare al portale di e-businnes o di 
Finf orinazione. L'obiettivo di chi attua una limitazio- 
ne del genere non è univoco. Per esempio, si può voler pro- 
teggere un'area del proprio sito web per celare informazioni 
riservate o elementi di amministrazione del sito stesso; oppu- 
re si può avere l'esigenza di creare un'area riservata ai soli 
clienti che abbiano acquistato un particolare servizio, fruibi- 
le proprio dalle pagine ad accesso limitato. 



pletamente funzionale ed utilizzabile così come è presentata. 
Al termine di questa lettura anche voi sarete in grado di imple- 
mentare un'applicazione completa per la gestione di un'area ad 
accesso limitato al vostro sito web. L'applicazione verrà suddivi- 
sa in differenti file .asp ognuno destinato ad una particolare fun- 
zionalità. Schematicamente, la nostra area protetta è costituita 
da una pagina, loginfornusp, che visualizza il form per l'inserimen- 
to di email e password, form che viene inviato a logiiusp che rap- 
presenta il cuore dell'applicazione; tale pagina processa i dati in- 
viati dall'utente e, se corretti, esegue due operazioni molto im- 
portanti: 

1) istanzia una variabile di sessione, una specie di flag che in- 
dica che l'utente si è autenticato correttamente; 

2) redireziona l'utente alla pagina riservatcasp. 

riservatcasp è la pagina a contenuto effettivamente riservato del 
nostro sito; può essere una pagina singola (come nell'esempio 
presentato in questo articolo) o anche una serie di pagine web; 
in ogni caso, il denominatore comune di queste pagine riservate 
è il controllo sull'esistenza o meno della variabile di sessione di 
cui sopra. Se la variabile non è stata istanziata, significa che l'u- 
tente sta operando un accesso non autorizzato, tentando di sca- 
valcare il form di autenticazione e l'autenticazione stessa. Ora 
analizziamo nel dettagli tutti gli elementi che costituiscono l'ap- 
plicazione e cioè il database sezioneprotetta.mdb, destinato a conte- 
nere i dati relativi ai nostri utenti, e le tre pagine asp le cui fun- 
zionalità sono state solo sommariamente presentate. 



Fig. 1 - Creazione 

del database 

sezioneprotetta.mdb 

e della tabella 

users. 



LA STRUTTURA 

La struttura dell'applicazione che andiamo a realizzare è molto 
basilare (in modo da permettere una migliore comprensione di 
tutti i passaggi della sua creazione) ma, al contempo, sarà com- 



O Microsoft Access 
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IL DATABASE 

Per prima cosa è necessario creare il database in cui memorizza- 
re email e password di tutti coloro a cui è consentito l'accesso nel- 
l'area riservata. Creiamo un database chiamato sezioneprotetta.mdb, 
apriamolo e creiamo (tramite la visualizzazione struttura) una ta- 
bella, che chiameremo users, costituita da tre campi: 

• ID: di tipo intero, contatore; sarà la chiave primaria della 
tabella. 

• email: conterrà l'indirizzo email di ogni utente. 

• password: conterrà la password relativa ad ogni utente 

In Fig. 1 è mostrato ciò che dovreste ottenere durante la crea- 
zione del database tramite MS Access 97/2000: ora popoliamo la 
tabella inserendo alcuni indirizzi email e alcune password casua- 
li, il database di supporto potete trovarlo già pronto fra il softwa- 
re relativo a questo articolo incluso nel CD-ROM. 
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%> 



APICI 



Neil utilizzo di stringhe inserite dal- 
l'utente in comandi SQL è importante 
sostituire sempre gli apici singoli con 
un doppio apice singolo: 

Replace(varStringa, , ) 



<html> 



E' il punto da cui i nostri utenti potranno 
iniziare la procedura d'accesso all'area ri- 
servata del sito. 

La pagina visualizza un form in cui sono 
presenti due campi <input> per l'inserimen- 
to di email e password e un bottone che, 
una volta premuto, invia il contenuto del 
form a login.asp. 

Il codice (quasi tutto HTML) di logiirform.asp 
è molto semplice: 



<head> 



<title> LoginForm - Sezione Protetta </title> 



</head> 



<body> 



<table border=0 bgcolor=#006060 cellspacing=1 width=150 

cellpadding=0 style="font-size:10px ; color:#000000; 
font-family:Verdana"> 



<tr> 



<td align=center bgcolor=#B4C4D3 height=20xb>L0GIN 

F0RM</bx/td> 



</tr> 



<tr> 



<td bgcolor=#E2E8E9> 



<table border=0 cellspacing=0 cellpadding=0 width=100% 
style="font-size:10px; color:#000000; font-family:Verdana"> 

<form method=post action=login.asp> 

<tr> 



<td> EMAIL<br> <input type=text name= 
email class=input3D size=18 value=""x/td> 



</tr> 



<tr> 



<td> PASSWORD:<br> <inputtype=password 
name=password size=18 value=""x/td> 



</tr> 



<tr> 



<td align=centerxinput type=submit value="LOGIN »"> 

</td> 



</tr> 



<trxtd height=6x/tdx/tr> 



<% 



'messaggio d'errore da visualizzare? 



if len(request.quer ystring("e rr"))>Q then 



%> 



<tr> 



<td align=center> 



</table> 



</td> 



</tr> 



</form> 



</table> 



</body> 



</html> 

Come potete notare, dopo la visualizzazione dei campi testo e del 
bottone, viene effettuato un controllo sull'eventuale presenza 
dell'elemento err nella querystring. Come vedremo in seguito, 
nella pagina logiiusp, se il controllo sui dati inseriti dall'utente 
non ha esito positivo, il browser viene redirezionato al form di lo- 
gin tramite il seguente redirect: 

response.redirect("loginform.asp?err=true") 

Nel caso dunque che nella querystring sia presente l'elemento err, 
in fondo al form viene visualizzato un messaggio d'errore che in- 
dica all'utente che l'indirizzo email e/o la password non sono cor- 
retti. 



L0GIN.ASP 



E' il cuore dell'applicazione; qui "viene deciso" se l'utente può 
continuare la sua navigazione all'interno delle pagine protette o 
se, invece, non è autorizzato a procedere e viene quindi redire- 
zionato al form di autenticazione iniziale. 
Il codice di login.asp (in questo caso solo ASP) non è molto com- 
plesso, ma va analizzato con molta attenzione: 



<% 



'rileva i dati inviati dal form 



dim email, password 



email = replace(request.form("email"), , ) 

password = replace(request.form("password"), , ) 

dim cn, rs, sql 

'connessione al database 

set cn = Server.CreateObjectC'ADODB.Connection") 
cn.Open "driver={Microsoft Access Driver (*.mdb)};dbq=" 

& Server.lVlapPathC'sezioneprotetta.mdb") 

sql = "SELECT ID FROM users WHERE EMAIL='"&email&"' AND 

PASSWORD="'&password& 

'cerca l'utente nel database 

set rs = cn.execute(sql) 

'utente trovato 

if not rs.eof then 



<font color =#ffOOOO>EIVIAIL PASSWORD E RRATE!</font> sessionfus erlogged" ) = true 



</td> 



rs.close 



</tr> 



set rs = not hing 



<trxtd height=6x/tdx/tr> 



cn.close 




<% 



set cn = no thing 



end if 
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response.redirecf'riservato.asp" 
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'utente non trovato 



else 



rs.close 



set rs = not hing 



cn.close 



set cn = no thing 



response.re direct("lo ginform.asp?err=true") 



end if 



%> 



Lo script login.asp raccoglie email e password provenienti dal form 
di loginform.asp e li memorizza nelle variabili email e password. Da no- 
tare che gli eventuali apici (') immessi dall'utente vengono so- 
stituiti con un doppio apice (attenzione: due volte l'apice singo- 
lo, non le virgolette doppie!). Successivamente viene composta 
la stringa SQL che interroga il database cercando un record che 
abbia email e password corrispondenti a quelli immessi nel form. 
Se il recordset risultante è vuoto, significa che nel database non 
è stata trovata la corrispondenza delle due variabili e quindi l'u- 
tente non è autenticato; in caso contrario, l'utente è presente 
nel database, ed ha inserito la password correttamente. Nel pri- 
mo caso, il navigatore viene reindirizzato alla pagina loginform.asp; 
nel secondo caso, invece, l'utente viene inviato alla pagina riser- 
vatcasp ma, prima di ciò, viene creata una variabile di sessione di 
tipo booleano denominata "userlogged", a cui viene assegnato il va- 
lore true. Una variabile di sessione è una variabile che, al contra- 
rio di quelle convenzionali dichiarate con la clausola Dim che 
hanno scope(visibilità) locale alla singola pagina .asp, hanno uno 
scope globale a livello della stessa sessione e il loro valore può 
essere quindi passato fra pagine .asp differenti. La creazione di 
questa variabile è fondamentale, in quanto, ad ogni accesso ad 
una pagina dell'area riservata (durante la medesima sessione), 
ne verrà verificata la presenza; nel caso essa non sia presente o 
non abbia valore true, il browser client verrà reindirizzato alla pa- 
gina contenente il form per il login. Tutto ciò può sembrare una 
futile precauzione, ma supponiamo che un navigatore "malin- 
tenzionato" conosca in qualche modo che la pagina riservata del 
nostro sito ha come uri: http://www.miosito.com/riservato .asp a que- 
sto punto, per scavalcare la protezione, gli basterebbe digitare 
direttamente tale uri senza passare attraverso la pagina di au- 
tenticazione del sito cosicché la nostra "barriera" risulterebbe 
perfettamente inutile. 

Controllando invece ad ogni pagina dell'area riservata la presen- 
za della variabile di sessione userlogged, la protezione non potrà 
essere oltrepassata in maniera irregolare. 



RISERVATO.ASP 

Questa è l'unica pagina effettivamente protetta, pagina che, per 
essere accessibile, richiede che l'utente abbia eseguito e comple- 
tato correttamente il passaggio di autenticazione. Per semplicità, 
in questa applicazione, la pagina riservata è soltanto una, ma 
possiamo immaginare di avere un numero molto superiore di pa- 
gine protette; il punto fondamentale è che, in testa ad ognuna di 



queste pagine, deve essere presente la porzione di codice che 
controlla l'avvenuta autenticazione dell'utente. 
Vediamo in dettaglio il listato di riservato.asp: 

<% 

'se l'utente non si era autenticato redirezionalo al form di login 
if not session( "userlogg ed") then 



respon se.redirectC'Iog inform.asp") 
end if 



'se l'uten te precedentemente aute nticato vuole uscire 

if request.querystring("action")="logout" then 

session.abandonQ 



response.red irectC'Io ginform.asp") 



end if 



%> 



<html> 
<head> 



<title> Pagina principale - Sezione Protetta</title> 



</head> 



<body> 



Utente autenticato.<br> 



Stai visualizzando una pagina ad accesso riservato.<brxbr> 
<a href=main.asp?action=logout>Clicca qui per uscire.</a> 
</body> 



</html> 

Nella parte iniziale viene eseguito il con- 
trollo sulla presenza della variabile di ses- 
sione. Se essa non è stata istanziata o se 
esiste ma non ha valore true, il client vie- 
ne riportato alla pagina di visualizzazione 
del form di login senza che venga visua- 
lizzato alcunché delle informazioni riser- 
vate. 

Seguono poi alcune righe di codice che 
permettono all'utente che si sia già au- 
tenticato di uscire dall'area riservata con 
relativa eliminazione di tutte le variabili 
di sessione (quindi anche della variabile 
userlogged) e redirezionamento al form di 
autenticazione. Questo codice viene ese- 
guito, grazie al passaggio dell'elemento 
"action" (a cui viene assegnata la stringa 
"logout") tramite la querystring, solo se 
l'utente clicca sul link testuale ("Clicca qui 
per uscire") che comparirà in fondo alla pa- 
gina riservata. Il resto della pagina è codice HTML che, sempli- 
cemente, informa l'utente del fatto che l'autenticazione è avve- 
nuta con successo e che si sta visualizzando una pagina ad ac- 
cesso riservato. Come accennato, segue il link per "uscire" dal- 
l'area riservata. 

In un prossimo articolo approfondiremo l'argomento con altri in- 
teressanti aspetti. 

Paolo Capitani 



VARIABILI 
DI SESSIONE 



Una variabile di sessione è una vari- 
abile che ha scope relativo all'intera 
sessione, per cui il suo valore può es- 
sere letto (e/o impostato) anche da 
pagine .asp differenti, purché nel- 
l'ambito della medesima sessione di 
navigazione. 



ELEMENTI DELLA 
APPLICAZIONE 



sezioneprotetta.mdb 
loginform.asp 
login.asp 
riservato.asp 



WEB 29 




Lato Server 



PHP & SMTP PER SPEDIRE EMAIL DAL WEB 



PHP & SMTP 
per spedire email 

dal web 

La sempre maggiore diffusione di 

Internet e del WWW ha spinto ad 

integrare nel web anche uno dei 

servizi più Vecchi" ed utilizzati in rete: 

la posta elettronica. . . 



Sul CD 

\soft\codice\ 
php_smtp.zip 



T - 

cr 

Jt- 



I SOCKET 



Un socket non è altro che un modo di co- 
municare con altri programmi utilizzan- 
do descrittori di file standard di Unix. Un 
descrittore di file è semplicemente un 
intero associato ad un file aperto. In 
Unix tutto viene rappresentato attra- 
verso i file: un FIFO, un terminale, un 
vero file su disco, una connessione di 
rete, etc. La funzione PHP fsockopen 
restituisce un descrittore di file associ- 
ato ad una connessione TCP stabilita 
verso uno spefico port di un host Inter- 
net. Di conseguenza le operazioni di in- 
vio delle informazioni dal e verso il 
server corrisponderanno alla lettura 
[fgets] ed alla scrittura [fputs] del file. 




a configurazione di un programma di posta elettroni- 
ca, come Outlook Express o Eudora, è una delle classi- 
che operazioni che l'utente Internet svolge al momen- 
to della registrazione ad un ISP (Internet Service Pro- 
rvider) o ad uno dei numerosi siti che offrono mailbox 
gratuite. Il nuovo account di posta sarà costituito da: un indiriz- 
zo email, l'indirizzo del server per le posta in uscita (SMTP), di 
quello per la posta in arrivo (P0P3) e l'username e la password 
per lettura della nostra mailbox. I problemi iniziano a sorgere 
quando non si ha la possibilità di utilizzare il proprio PC per in- 
viare o ricevere email. Prima dello sviluppo di applicazioni mail 
per il web, l'utente doveva riconfigurare il proprio account di po- 
sta sul nuovo computer; cosa non del tut- 
to immediata se, oltre ad avere di fronte 
un programma di posta a lui sconosciuto, 
diverso dal suo era anche l'ISP a cui il PC 
era collegato. In questo caso bisognava ri- 
cercare il nuovo indirizzo del SMTP visto 
che, per motivi di sicurezza, l'utilizzo del 
server è concesso ai soli clienti dell'Inter- 
net Service Provider. In definitiva, troppe 
erano le cose da fare e da ricordare per 
spedire una email e/o per effettuare un 
controllo veloce della propria casella di 
posta; che magari, dopotutto, risultava 
essere anche vuota. Oggi grazie allo svi- 
luppo di applicazioni web dinamiche che 
si interfacciano ai server per la gestione 
della posta (SMTP e P0P3), l'utente può 
inviare e ricevere email utilizzando un 
semplice browser web senza così effettua- 
re alcun tipo di configurazione; gli unici 
dati che dovrà ricordare sono l'username e 
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la password. In questo articolo, aiutandoci con la programma- 
zione ad oggetti (inserita dalla ver. 4 del PHP) realizzeremo una 
classe chiamata smtp, che implementerà tutte le proprietà ed i 
metodi necessari per inviare email ad un server SMTP. Da pre- 
mettere che in PHP esiste già una funzione di spedizione mail 
(mail()) che non gestisce però gli attach, lacuna che la nostra clas- 
se prowederà a colmare. 

FORMATO DEI MESSAGGI 

Nei sistemi di posta elettronica, il messaggio è suddiviso in due 
parti: l'intestazione e il corpo. Il corpo è per il destinatario umano, 
mentre l'intestazione contiene informazioni di controllo per gli 
agenti utenti (client SMTP). È grazie ai campi di intestazione che 
i clienti di posta, come Outlook Express ed Eudora, riescono ad 
avere informazioni sul mittente, sui destinatari, sulla data di in- 
vio, sull'oggetto, sulla priorità e soprattutto sulla natura del cor- 
po del messaggio. Ai tempi di ARPANET la posta elettronica con- 
sisteva esclusivamente di messaggi testuali espressi in ASCII. 
Questo tipo di approccio (dettato dall'RFC 822) diventò presto 
inadeguato, tramite email infatti, deve essere possibile: inviare e 
ricevere messaggi in lingue accentate, in alfabeti non latini (co- 
me ebraico e russo), in lingue senza alfabeto (come cinese e 
giapponese) e messaggi che non contengano assolutamente te- 
sto scritto (come audio e video). Una soluzione fu proposta con 
l'RFC 1341 (successivamente aggiornata con l'RFC 1521) e chia- 
mata MIME (Multipurpose Internet Mail Extension). L'idea base di MIME è di 
continuare ad usare il formato RFC 822, ma di aggiungere una 
struttura al corpo del messaggio e di definire regole di codifica 
per i messaggi non ASCII. Così facendo, è possibile inviare i mes- 
saggi MIME usando i protocolli di posta elettronica esistenti, l'u- 
nica cosa che si è dovuto modificare sono stati i programmi per 
l'invio e la ricezione. Vediamo un esempio di come è strutturata 
una semplice mime mail: 



busta 



from: "antonio" jok er@myo ffice.it 



to: emm a@myof fice.it, adriano@interfree.it 
Ce: radar@myoffice.it, spiderac@myoffice.it, 

dodgio@myoffice.it 

Ccn: iti@iti-cesena.it 



intestazion e del messa ggio 



from: joker@myoffice.itto: emma @myoffic e.it, adriano@interfree.it 
Ce: radar@myoffice.it, spiderac@myoffice.it, dodgio@myoffice.it 
Subject: auguriDate: Wed, 25 Die 2002 15:38:02 +0100 
MIME-Version: 1.0 



Content-Transfer-En coding: 8bit 



Content-Type: text/ plain; 



charset="iso-8859-1" 



X-Priority: 3 
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X-Mailen Webmail 



X-Mailen Webmail 



Content-Type: multipart/mixed; 



corpo del mes saggio 



Auguri di buon natale e felice anno nuovo 

Una riga vuota distingue l'intestazione dal corpo del messaggio. 
MIME-version dice all'agente utente che sta ricevendo un messaggio 
MIME. Se tale intestazione non è presente, il messaggio sarà ela- 
borato come un testo ASCII. Content-Transfer-Encoding dice all'agente 
utente come è stato trattato il corpo per la trasmissione attraver- 
so la rete. Le codifiche più comuni per il testo, sono l'ASCII a 7 
ed a 8bit. Il testo ASCII può essere trasportato direttamente dal 
protocollo di posta elettronica a patto che ciascuna linea non su- 
peri i 1000 caratteri. Invece il modo corretto per codificare i file 
binari è di utilizzare la codifica base64 chiamata anche protezio- 
ne ASCII. In questo schema i ritorni carrello e gli "a capo" (\r\n) 
vengono ignorati, così da poter essere inseriti a piacere per man- 
tenere le righe abbastanza brevi o comunque sotto il limite dei 
1000 caratteri. 

L'intestazione Content-type specifica all'agente utente la natura del 
corpo del messaggio. L'RFC 1521 definisce sette tipi di Content-type, 
ognuno dei quali ha uno o più sottotipi. Il tipo ed il sottotipo so- 
no divisi dal carattere /. 
I Content-type più comuni sono: 

• Text/plain • Text/html • Image/gif 

• Image/jpeg • Audio/basic • Audio/wav 

• Video/mpeg • Application/Octet-stream • Multipart/Mixed 

Gli ultimi due, Application e Multipari, sono i più interessanti. 
Application viene definito per tutti quei formati che richiedono 
una elaborazione non prevista dagli altri tipi (es: application /msword 
per i file Word (.doc), application/zip per i file .zip, e così via). Il sotto- 
tipo octet-stream indica una sequenza di byte non interpretabile e 
di conseguenza non associabile ad una specifica applicazione. 
In definitiva Application/Octed-stream è una classica intestazione uti- 
lizzata dal cliente di posta elettronica quando si cercano di spe- 
dire file per i quali sul sistema non esiste alcuna applicazione as- 
sociata. Il tipo Multipari permette ad un messaggio di contenere 
più parti opportunamente divise da un codice univoco chiama- 
to boundary. Il sottotipo mixed indica che le parti sono differenti una 
dall'altra. Multipart/Mixed è il Content-type che deve comparire nell'in- 
testazione di ogni messaggio che contiene dei file allegati (o at- 
tach). 
Vediamone un esempio: 



boundary="5b1 64 5599fa69d63b 64d31 78ca70 f3b9" 

This is a multipart messa ge in MI ME format. 

-5b1 645599fa69d63b64d31 78ca70f3b9 

Content-Type: text/plain; 

charset="iso-8859-1" 
Content-Transfer-Encoding: 8bit 



Augu ri di buon natale e di felice anno nuovoJ 
-5b1 645599fa69d63b64d31 78ca70f3b9 

Content-Type: audio/wav 

Content-Transfer-E ncoding: base64 

Conten t-Disposition: attachment; 



filename=" MaryChri stmas.wav" 



UklGRtjZAABXQVZFZmIOIBAAAAABAAIAIIYAAIhYAQAEABAAZGFOYYT 

ZAAACAAMACQAGAAcAAgA 

FAAAAAwADAAEAAgD//wMABAABAAUAAQAFAA 

lABQAAAAQABA ADAAAACAACAA IABAAAAAlAAg 

AAAAEAAAACAAlAAwACAAYAAQAGAAUABwACAAcAAQAJAAEABwA 

CAAlAAwACAAIABgABAAUA 

BQAAAAIABgAAAAYAAQAGAA 



-5b1 645599fa69d63b64d31 78ca70f3b9- 



--5b1 645599fa69d63b64d31 78ca70f3b9 — 

Questo esempio illustra il formato di una 
mime email contenente oltre al messag- 
gio testuale (Auguri di buon natale e di felice anno 
nuovo) anche un allegato (MaryChristmas- 
.wav). 

Come si può notare il Content-type è un Mul- 
tipart/Mixed. Le sezioni del messaggio sono 
delimitate dal boundary definito nell'inte- 
stazione e preceduto dai caratteri "--". 
Ogni sezione avrà una intestazione ed un 
corpo. Nell'intestazione saranno indicati 
il Content-type, il Content-Transfer-Encoding ed il 
Content-Disposition, mentre nel corpo sarà 
presente l'informazione opportunamente codificata (nel caso 
del file wav in base64). L'ultima sezione del messaggio si chiu- 
de con due linee vuote (CRLF, CRLF) ed il boundary preceduto e 
seguito dai caratteri "--". 

COSTRUIAMO LA CLASSE SMTP 

La classe smtp.php conterrà le proprietà: 



MD5 è un algoritmo per calcolare la 
funzione di hash di un file, ossia per- 
mette di generare un identificativo 
univoco di un file o di un flusso di dati. 
Gli algoritmi di hash sono utilizzati 
per verificare l'integrità dei dati 
trasmessi e quindi rivestono un ruolo 
fondamentale per la firma digitale. 



from: jo ker@myo ffice.it 



to: emma@myoffice.it, adriano@interfree.it 



Ce: radar@myoffice.it, spiderac@myoffice.it, dodgio@myoffice.it 

Subject: auguri 

Date: Wed, 25 Die 2002 15:38:02 +0100 
MIME-Version: 1.0 
X-Priority: 3 



$from: un array che conterrà il nominativo e l'email del 
mittente. 

$to, $cc, $ccn: stringhe utilizzate per memorizzare rispet- 
tivamente l'indirizzo, o gli indirizzi (separati da virgole), 
dei destinatari, dei destinatari in copia carbone ed in co- 
pia carbone nascosta. 
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Gli RFC (Request For Comments) 
sono documenti ufficiali che definis- 
cono tutti i protocollip le procedure 
ed i funzionamenti di ogni "parte" di 
Internet. Essi costituiscono l'ossatu- 
ra fondamentale del funzionamento 
della rete e naturalmente, come il 
titolo stesso dichiara, sono di pubbli- 
co dominio. Ad oggi esistono oltre 
3000 RFC. 



• $boundary: sarà settato nel caso di email che contengono 
allegati. 

A questo punto si rende necessario realizzare un metodo (add_at- 
tachment) per accodare all'array $parts tutte le informazioni sugli 
allegati. I parametri in ingresso a questa funzione saranno: il no- 
me del file, il content-type, il content-transfer-encoding ed il file (oppor- 
tunamente caricato in una variabile). Questo sistema di funzio- 
namento torna utile nel caso in cui l'allegato non è un fisica- 
mente conservato su disco ma è un file creato dinamicamente 
dal PHP (come ad esempio nel caso dei pdf). Però è possibile, 
omettendo il parametro relativo al contenuto ($message) ed indi- 
cando un URL per il nome ($file), demandare alla funzione il com- 
pito di recuperare il file. 

Altro metodo dedicato alla costruzione della email è buildjiea- 
ders(), che provvedere, in base alle proprietà, a definire l'header 
del messaggio: ogni stringa indicante i de- 
stinatari (separati da virgole), i destinata- 
ri in copia carbone ed in copia carbone na- 
scosta, sarà esplosa in un array e gli indi- 
rizzi email saranno aggiunti all'intestazio- 
ne. Se l'array parte contiene elementi (ossia 
ci sono allegati), sarà calcolato un id uni- 
voco ed assegnato al boundary presente 
nell'intestazione Content-type: Multipart/Mixed. 
Ci siamo!!! L'email è pronta per essere spe- 
dita. 

A questo punto è necessario realizzare i 
metodi per gestire la comunicazione con il 
server SMTP. 



data 



354 go 



SMTP- SIMPLE MAIL 
TRANSFER-PROTOCOL 

Per poter comunicare con il server SMTP è necessario stabilire 
una connessione TCP (tramite i socket) alla porta 25 del compu- 
ter sul quale il server è in esecuzione. Dopo che il cliente ha sta- 
bilito una connessione, il server si identifica spedendo una linea 
di testo che inizia con un codice numerico. In base al codice, il 
cliente riesce a capire se il server è pronto o meno a ricevere la 
posta. Se la risposta è positiva (codice 220) il cliente deve iden- 
tificarsi al demone SMTP inoltrando il comando HELO <domain na- 
me>. Vediamo come avviene una semplice comunicazione tra un 
cliente ed un server smtp per la spedizione di una mime mail: 



From: "antonio" <joke r@myoffi ce.it> 



To: amici@libero.it 



Ce: pippo@pippo.it 
Subject: Fortune J 



Mime-Version: 1.0 
X-Mailer: Webmail 
X-priority: 1 



Content-Type: text/plain; 

charset="iso-8859-1" 



Content-Transfer-Encoding: 8bit 



"C'È vero progresso solo quando i vantaggi di una nuova 

tecnologia diventano per tutti" 

250 ok 

Per stabilire una connessione con un server SMTP utilizziamo la 
funzione PHP fsockopen. Successivamente la funzione check_ answer 
legge la risposta del server e controlla se il codice numerico è 
uguale al parametro passato alla funzione. In caso contrario il 
processo sarà terminato e visualizzato il messaggio d'errore. Se 
la connessione è stata attivata correttamente è possibile spedire 
la nostra email tramite la funzione sendmail(), che si preoccuperà 
inoltre, se il boundary è stato settato dalla funzione build_header(), 
di invocare il metodo send_multipart() in modo da spedire anche gli 
allegati. La funzione sendmail() si conclude inviando al server una 
riga vuota seguita da un "." ed un CRLF. Quest'ultima operazione 
indicherà al demone SMTP che la fase di costruzione dell'email è 
finita e che questa può essere inoltrata verso le caselle di posta 
elettronica dei destinatari. send_multipart() è senza dubbio la fun- 
zione più interessante della nostra classe, in quanto, facendo ri- 
ferimento alle informazioni contenute nell'array parts, prowe- 
derà ad inviare gli allegati. Se il campo "Message" dell'array è 
vuoto, il file sarà recuperato dalla posizione (URL o path) indi- 
cata nel "Filename". I file binari saranno codificati in base64 e, 
dopo aver aggiunto ogni 76 caratteri un CRLF (\r\n), spediti al 
server SMTP. I file di testo saranno spediti in chiaro, e per otti- 
mizzare l'occupazione di memoria principale (nel caso in cui un 
file di testo deve essere recuperato), saranno inoltrati al server 
SMTP man mano che vengono letti (ogni 4096 byte). 
L'ultima sezione terminerà inviando al server SMTP due righe 
vuote seguite dal boundary di chiusura: 



"-$this->boundary"-". 



220 SMTP Server R eady 

helo myoffice.it 

250 g'day eh! 



mail from: jo ker@my office.it 
250 'aig ht sender' s cool 



rcpt to: amici@libero.it 



250 ok 



rcpt to: pipp o@pippo.it 



250 ok 



CONCLUSIONI 

In questo articolo si è mostrato come in PHP è possibile (trami- 
te i socket) diventare clienti di una applicazione server presente 
su Internet. Nel caso specifico abbiamo stabilito una connessio- 
ne TCP ad un server SMTP al fine di negoziare la spedizione di 
email eventualmente corredate da allegati. 

Antonio Perri 
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Sicurezza 



La sicurezza 

(lei SOftWare prima parte 



di Corrado Giustozzi 



Un vecchio e feroce adagio dell'informati- 
ca dice, più o meno, che se gli ingegneri 
costruissero i palazzi come i programma- 
tori scrivono il software, il primo picchio 
di passaggio potrebbe distruggere una 
città. È un'esagerazione, certo, un paradosso... ma, 
come tutti i paradossi, racchiude in sé una grande 
verità. Ci piaccia o no, la maggior parte del software 
in giro per il mondo è davvero troppo inaffidabile, os- 
sia vulnerabile nei confronti di errori accidentali o di 
attacchi sistematici; ed in alcuni casi ciò comporta 
reali rischi per l'organizzazione che utilizza quel 
software o per i suoi utenti. 

La Società dell'Informazione, massima realizzazione 
di millenni di evoluzione della civiltà occidentale, 
sembra dunque più un colosso dai piedi d'argilla che 
un sistema infrastrutturale stabile e sicuro; e anche 
se la tendenza verso la virtualizzazione dei rapporti 
sociali sembra ormai inarrestabile, sono in molti a 
dubitare dell'opportunità di affidare del tutto a siste- 
mi tecnologici come quelli attuali la gestione della 
complessa rete di relazioni che costituisce il flusso 
vitale sul quale poggiano le realtà sociali, economi- 
che, produttive, organizzative ed amministrative del- 
le società contemporanee. 

Certo la complessità dei sistemi non gioca a favore 
della loro affidabilità: ma il problema vero non è le- 
gato solo alle dimensioni dei sistemi quanto al loro 
intrinseco processo realizzativo, e più precisamente 
alla possibilità (o impossibilità...) di realizzare 
software robusto e sicuro oltre che corretto. 



EQUILIBRI INSTABILI 

Diversi sono i fattori critici che concorrono ad ali- 
mentare la spirale della vulnerabilità dei sistemi: l'in- 
gestibilità del software oltre una certa soglia di com- 
plessità, la crescente tendenza verso l'utilizzo di si- 
stemi "off the shelf ' a bassa affidabilità anche nella 
realizzazione di infrastrutture critiche, l'intrinseca 
immaturità di talune tecnologie digitali, la modalità 
di progettazione spesso troppo approssimativa o "in- 
genua" persino nei sistemi cruciali. Di solito tutto 



funziona bene perché le condizioni in cui i vari sot- 
tosistemi si trovano ad operare sono quelle nominali, 
e le tolleranze di esercizio sono ampie: ma esiste 
sempre la possibilità che qualcosa collassi clamorosa- 
mente non appena un evento imprevisto porti il si- 
stema al di fuori dello stato di equilibrio. 
Il rischio, in un sistema molto complesso, è che al 
suo interno si inneschi un micidiale processo di "re- 
troazione positiva": ossia che la reazione automatica 
ad una perturbazione vada in realtà nel verso sba- 
gliato e destabilizzi ulteriormente la situazione. In 
questo caso ogni nuova reazione del sistema allo 
squilibrio peggiorerà ulteriormente le cose, instau- 
rando un circolo vizioso che porterà ben presto il si- 
stema stesso al di fuori delle specifiche di funziona- 
mento e finirà per renderlo inoperativo. Ma non è fi- 
nita qui: a questo punto è infatti probabile che si in- 
neschi anche una reazione a catena verso i sistemi 
collegati i quali, accorgendosi del malfunzionamento 
del primo sistema (o, peggio ancora, non accorgen- 
dosene e continuando a prendere per buoni i suoi 
output...), nel tentativo di reagire all'anomalia po- 
trebbero a loro volta fallire. 

Situazioni del genere si sono già verificate in passa- 
to, ed hanno rischiato di causare catastrofi estrema- 
mente significative. Il famoso "venerdì nero" di qual- 
che anno fa alla Borsa di New York, ad esempio, fu 
provocato proprio dai meccanismi automatici di con- 
trollo delle transazioni che, in teoria, avevano invece 
lo scopo di salvaguardare l'andamento dei mercati: 
un inaspettato ma non allarmante ribasso di alcuni 
titoli-guida provocò l'attivazione di alcune procedure 
di "protezione" che procedettero a vendere i titoli in 
calo; ma l'effetto di queste vendite fu una perdita più 
generalizzata e consistente, alla quale le procedure 
automatiche reagirono con ulteriori vendite sempre 
più massicce. In pochi minuti la Borsa giunse quasi 
al crollo. Quella lezione ha insegnato che i sistemi 
automatici di controllo non devono essere troppo 
reattivi per non provocare pericolosi "effetti valan- 
ga", e da allora i meccanismi di stabilizzazione delle 
Borse sono stati rivisti e corretti; ma questo non as- 
sicura che essi sapranno reagire correttamente ad 
ogni situazione nuova ed anomala che dovesse pre- 
sentarsi in futuro. 

SOFTWARE CORRETTO 
E SOFTWARE ROBUSTO 

Purtroppo il programmatore quadratico medio di so- 
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lito non affronta lo sviluppo di un'applicazione in 
un'ottica "paranoica", ma dà per scontato che il suo 
software funzionerà in un contesto grosso modo ri- 
spondente alle specifiche; il che è un errore, in 
quanto non basta che un programma sia corretto per 
ritenere che sia anche affidabile. 

Il fatto è che il software è un og- 
getto relativamente giovane e, 
checché se ne dica, non è un pro- 
dotto industriale: pertanto non so- 
no state ancora sviluppate (e a 
maggior ragione maturate) dalla 
comunità informatica quelle ne- 
cessarie conoscenze, sia teoriche 
sia pratiche, che consentirebbero 
di realizzarlo in modo accettabil- 
mente e dimostrabilmente affida- 
bile. La programmazione è ancora 
oggi più un'arte che una scienza, e 
decenni di metodologie formali di 
sviluppo o di programmazione ad 
oggetti hanno avuto impatti solo 
sulle modalità di conduzione dei 
progetti software dalle dimensioni 
stratosferiche, non certo dei pro- 
getti medio-piccoli che general- 
mente sono quelli nei quali sono 
coinvolti i comuni mortali. 
In generale è già tanto quando un 
programmatore applica nel suo la- 
voro i principi della cosiddetta 
programmazione difensiva. Con 
questo termine generico si indica 
tutta quella serie di tecniche, 
spesso non formalizzate ed essen- 
zialmente euristiche, ossia lasciate alla sensibilità ed 
all'esperienza del singolo programmatore, mediante 
le quali si cerca di far sì che il programma che si sta 
sviluppando sia non solo corretto, ovvero lavori se- 
condo le specifiche, ma anche robusto, ovvero riesca 
a mantenere un funzionamento corretto anche in 
presenza di errori o di situazioni impreviste. Un pro- 
grammatore con un sano atteggiamento difensivo, ad 
esempio, non si fiderà ciecamente dell'input passato- 
gli dall'utente ma prowederà a validarlo da un pun- 
to di vista sintattico prima di elaborarlo; prowederà 
a verificare i risultati ritornati dalle chiamate di si- 
stema per catturare in tempo eventuali errori di run- 
time; disseminerà il suo codice di assert o costrutti 
analoghi, e così via. Tutto sommato, come dice un al- 
tro assioma dell'informatica, la programmazione è 
quella disciplina dove l'impossibile accade regolar- 
mente, dove le costanti non lo sono e le variabili non 
mutano, per cui è meglio diffidare di quasi tutto ciò 
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che succede! 

Purtroppo però neppure la programmazione difensi- 
va serve a proteggersi contro tutti i possibili acci- 
denti che potrebbero accadere ad un programma. Il 
cosiddetto Secondo Postulato di Troutman, una del- 
le applicazioni all'informatica della Legge di Murphy, 
recita infatti: "se il programma è stato concepito in 
modo tale che i dati incorretti siano rifiutati, ci sarà 
sempre un idiota abbastanza ingegnoso il quale tro- 
verà il metodo per farli passare lo stesso". Molti dun- 
que rinunciano in partenza, confidando del fatto che 
tanto il programma funzionerà bene nella maggior 
parte dei casi anche in assenza di specifici meccani- 
smi di verifica, i quali tanto non potrebbero riuscire 
a intercettare e rendere inoffensiva ogni fonte di di- 
sturbo. 

SOFTWARE ROBUSTO 
E SOFTWARE SICURO 

Un programma corretto, dunque, non è necessaria- 
mente robusto; e a maggior ragione non è necessa- 
riamente sicuro. La differenza è sottile ma fonda- 
mentale: un software robusto resiste ad errori gros- 
solani negli input ed a situazioni anomale generate 
per accidente, ma generalmente soccombe ad un at- 
tacco mirato che ha come scopo la sua disabilitazio- 
ne o l'alterazione deliberata delle sue caratteristiche 
di funzionamento; un software sicuro resiste anche a 
questo, o se fallisce lo fa almeno in modo tale da non 
offrire il fianco a danni più gravi. 
Non è facile scrivere software sicuro; tuttavia ci si 
può provare, almeno nei limiti di una sana paranoia 
e compatibilmente con le esigenze e gli ambiti ope- 
rativi nei quali ci si trova ad operare. Il software di 
una centrale nucleare o di un firewall, ovviamente, 
devono essere molto sicuri oltre che robusti; ma an- 
che quello di un gioco multiutente, se vogliamo ad 
esempio evitare che un intruso, sfruttando ad arte 
qualche bug o "feature" del gioco, possa accedere ai 
file memorizzati sui PC degli altri giocatori. E gli 
esempi potrebbero essere quasi infiniti. 
Il prossimo mese vedremo dunque qualche esempio 
pratico di software corretto ma non robusto e non si- 
curo, discutendo come banali bug o semplici man- 
canze di controlli possano in determinate situazioni 
diventare brecce di sicurezza straordinariamente 
gravi. Dopo di che non saremo automaticamente in 
grado di scrivere software avionico per i caccia mili- 
tari, ma forse guarderemo con occhi diversi il pro- 
cesso di sviluppo di applicazioni solo apparentemen- 
te ovvie e banali, come ad esempio un semplice script 
di controllo degli accessi ad una pagina Web protet- 
ta. 



